觀察產品經理這類互聯網從業者，你會發現他們使用的瀏覽器一定會選擇用Google。除了極簡的交互設計外，Chrome瀏覽器本身性能高、啓動快、擴展插件多，可以屏蔽廣告、和滿足豐富的個性化需求。
而chrome瀏覽器裏自帶的CDT（Chrome develop tools）實際上也是做互聯網產品經理必用的能力。比如網站站點、H5的測試、驗收和用戶問題收集，都可以用CDT完成產品的測試和問題定位。
在前端項目開發中，chrome瀏覽器頗受青睞。打開網站，點擊F12，即可看到chrome開發者工具。我們可以藉助chrome開發者工具進行網頁調試，來查看網頁html代碼、css樣式、http請求、運行js等。
▲ 在Chrome瀏覽器開發者模式面板
如上圖是PMTalk在官網無法訪問下，通過CDT調用的看板。開發者工具面板上包含了Elements、Console、Sources、Network、Performance、Memory、Application、Security、Audits面板。
在日常測試中，產品經理和測試通過 Network 面板能幫忙定位到80%問題，很多產品經理都不知道熟悉使用。但對於日常產品研發中，定位好問題可以大大縮小問題解決時間，因此成了使用最頻繁的。
先簡單介紹Chrome瀏覽器裏，各面板的功能及使用說明如下：
Elements:
查找網頁源代碼，實時編輯DOM節點和CSS樣式，修改的效果會立即顯示在瀏覽器中，極大地方便了前端的調試。
▲ 社區CSS元素
Console:
輸出開發過程中的日誌信息，允許通過js命令行【console.log()】、【console.error()】輸出操作日誌
▲ PMTalk的console面板
Network:
從發起網頁頁面請求Request後，分析HTTP請求得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。
PMTalk的network面板
在network中，4個重要的參數
Header：列出資源的HTTP頭信息，包括請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等。
Preview：預覽面板，據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
response：比如在查詢2021年到2020年的更新原創文章，在query string parameters 上查看前端的請求參數，發現傳過去的參數正常，那結果顯示的數據異常就一定是response的數據問題。
若H5頁面缺少字段或計算有誤，或者明顯是後端報錯信息，可在Network中定位接口返回信息，如下圖，Headers的入參，查看XHR接口的Preview或Response的信息
Timing ：
這是產品經理經常會和開發同學討論的問題，直觀的是頁面訪問太慢、加載費時間。主要包含Request sent 和 Waiting(TTFB)。
Request sent：發起請求的時間。
Waiting(TTFB)：發起HTTP請求後從服務器接收到第一個字節時間，包含了TCP連接時間。
除開網絡服務器問題、還有在開發過程中前端打包方式、資源加載方式都會影響速度。
如果請求很慢往往是在Waiting(TTFB)佔用很多時間。每個公司對響應速度要求不一樣，但如果超過500ms，給用戶體現是比較慢，這是可以向後臺開發人員反饋問題。
▲ 請求參數訪問時間
在console下，信息標識讀寫有分4類。
最基本也是最常用的用法了，分別表示輸出普通信息、錯誤信息、警示信息和提示性信息，且每個標識信息都有特定的圖標和顏色標識。
通過network定位問題問題類型
產品研發中，開發會分爲前端、後臺，在產品設計過程中會分爲交互設計、和UI設計2類。所以能夠定位清楚問題，至少增加了溝通效率，把前端的問題交給前端、把後臺的問題交給後臺。
下面三個方法在console network上去判別問題類型
1.請求接口url是否正確
如果請求的接口url錯誤，爲前端的bug
2.傳參是否正確
如果傳參不正確，爲前端的bug
3.請求接口url和傳參都正確，查看響應是否正確
如果響應內容不正確，爲後端bug
4.也可以在瀏覽器控制檯輸入js代碼調試進行分析
如下圖是在network上的XHR上，在preview上查看傳輸字段，驗證是否接口報錯。
▲ 參數傳輸錯誤
還有可以通過status代碼來判斷前端、後臺、還是網絡問題。這裏常用的根據HTTP狀態碼有
▲ HTTP狀態碼
測試H5頁面時，也可在調試器的Network中直接查看http返回的錯誤碼，來判斷問題發生的原因。如下圖的Status報502，可斷定是錯誤網關（服務器接收到來自上游服務器的無效響應）
下面我收集了常用的HTTP狀態碼，產品經理和測試通過狀態碼來做前後端問題定位是最快的。
200("OK")
一切正常。實體主體中的文檔（若存在的話）是某資源的表示。
400("Bad Request")（前端問題）
客戶端方面的問題。實體主題中的文檔（若存在的話）是一個錯誤消息。希望客戶端能夠理解此錯誤消息，並改正問題。
500("Internal Server Error")（後端問題）
服務器方面的問題。實體主體中的文檔（如果存在的話）是一個錯誤消息。該錯誤消息通常無濟於事，因爲客戶端無法修復服務器方面的問題。
301("Moved Permanently")（前端問題）
當客戶端觸發的動作引起了資源URI的變化時發送此響應代碼。另外，當客戶端向一個資源的舊URI發送請求時，也發送此響應代碼，也就是重定向
404("Not Found") 和410("Gone")（網絡問題）
當客戶端所請求的URI不對應於任何資源時，發送此響應代碼。404用於服務器端不知道客戶端要請求哪個資源的情況；410用於服務器端知道客戶端所請求的資源曾經存在，但現在已經不存在了的情況。
409("Conflict")（前端問題）
當客戶端試圖執行一個”會導致一個或多個資源處於不一致狀態“的操作時，發送此響應代碼。