chrome瀏覽器開發者工具簡介

時間 2019-11-09

標籤 chrome 瀏覽器開發者工具簡介欄目 Chrome 简体版

原文原文鏈接

Chrome瀏覽器得益於其優秀的V8解釋器，javascript執行速度和內存佔有率表現很是優秀。javascript

掌握了Chrome工具可提升學習效率和開發效率。html

有以下功能面板，可使用Ctrl+[和Ctrl+]快捷鍵在面板之間切換。html5

簡單經常使用的就一筆帶過java

1、標籤頁

查看DOM tree內容
根據標籤頁的html內容找到對應元素
根據頁面元素找到標籤頁的html
改變DOM內容
查看js動態生成的DOM
在標籤頁右側查看style
查找

應用：jquery

支持ctrl+z恢復操做。瀏覽器

能夠爲dom節點添加斷點。當dom節點發生變化的時候，代碼會停在修改這個dom節點的js代碼的位置。安全

也能夠看到dom節點上邊綁定了哪些事件。cookie

2、控制檯

一、控制檯很是有用，對於javascript提供的API或者API的功能不是很是熟悉。這個時候命令行就成爲咱們試驗最好的地方。如，咱們想查看document下面有哪些函數，咱們就能夠在命令行中輸入，而後選中並嘗試。對於jquery等開源框架的學習，這種方式也很是高效，學代碼仍是得跑起來才行。網絡

二、Chrome console換行輸入session

咱們按enter是對輸入的內容運行，若是要換行須要按shift+enter。在這裏面，咱們直接在命令行裏面裏面講calSum函數覆蓋掉，a+b換成了a*b。運行結果以下所示。

3、源碼

sources，意思是「來源」，這個面板按照資源的來源分類。

一、快速找到資源文件ctrl+p（模糊搜索）

初學者找文件，常常是打開控制檯Source，在裏面一級一級目錄的找，比較低效。快捷鍵ctrl+p可用打開搜索面板，輸入關鍵詞就能夠找到相關文件。

二、在所有文件中查找ctrl+shift+f

在某個文件中查找，只須要ctrl+f就能夠。這種方法須要2步，打開文件，ctrl+f。ctrl+shift+f能夠一步到位，不須要打開文件，就能查找。

注意：不要打開文件，直接ctrl+shift+f查找。

三、快速調到指定行ctrl+g

當一個文件很長時，在文件尾部想要回到開頭,能夠拖着滾動條到開頭，效率很低。能夠用ctrl+G快捷鍵呼出輸入框，輸入行號，快速跳到指定行。

四、高亮下一個匹配項ctrl+d（多選）

選中一個單詞，按ctrl+d，下一個匹配的單詞也會被選中。

五、斷點

除了給設定常規斷點外, 還能夠在某一特定事件發生時中斷(不針對元素) , 在 Scripts 面板右側, 有個 Event Listener Breakpoints, 這裏列出了支持的全部事件, 不只 click, keyup 等事件, 還支持 Timer(在 setTimeout setInterval 處理函數開始執行時中斷), onload, scroll 等事件。

六、代碼出錯定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript add</title> <script type="text/javascript"> var div = document.getElementByd("a"); function calSum() { var a = parseInt(document.getElementById("num1").value); var b = parseInt(document.getElementById("num2").value); document.getElementById("num3").value = (a + b); } </script> </head> <body> <input type="text" id="num1" />add <input type="text" id="num2" /> <input type="button" id="btnCal" onclick="calSum()" value="equal" /> <input type="text" id="num3" /> </body> </html>

上面的代碼中， document.getElementByd("a")顯示是錯誤的，在IDE中有些錯誤是檢查不出來的（特別是跟瀏覽器有關的部分）。加載該頁面後，能夠在控制檯看到報錯信息，而後直接定位至出錯點，也能夠在Sources中看到報錯信息。

七、調用棧

調用棧。Call Stack

能夠看到一個函數是在哪裏調用的。

工做中經常須要去看其餘同事寫的代碼的，你知道它必定會調用了某個方法，可是你不知道是哪裏調用的，就能夠給它打個斷點。而後觀察它的調用棧。很容易就理清了某個功能的實現脈絡。

斷點停下來的時候。在console控制檯能夠console出當前位置的活動環境的做用域中的值，好比能夠看到當前函數的活動環境下的this的值。能夠很方便的看到某個功能模塊對象中的各個值是否跟設想的同樣。從而發現問題，糾正本身的思路，一步步地完善代碼。

在斷點調試的過程當中，若是你的js是寫在單獨的文件中。就能夠直接修改代碼，而後ctrl+s保存，再運行的時候就能夠運行你修改後的代碼。這樣能夠直接在瀏覽器中邊修改邊調試。效率能提升很多

在js代碼中寫 debugger;會自動斷點到該位置。

4、網絡

能夠查看頁面全部資源的響應狀況，包括響應時間，瀏覽器等待時間，狀態碼，資源大小等。是一個很重要也比較複雜的面板。所以我單獨寫了篇文章來介紹，詳情可參考：Chrome Developer Tools：Network Panel說明

5、時間線

Timeline工具欄能夠詳細檢測出Web應用在加載過程當中，時間花費狀況的概覽。這些應用包括下載資源，處理DOM事件, 頁面佈局渲染或者向屏幕繪製元素。也是一個很重要且比較複雜的面板。所以我單獨寫了篇文章來介紹，詳情可參考：Chrome Developer Tools：Timeline Panel說明