Chrome DevTools是開發(fā)者最好的“朋友”

隨著Javascript框架的爆炸式增長，擁有在瀏覽器中實(shí)時(shí)處理代碼的能力是尤為重要的，Chrome DevTools是內(nèi)置在瀏覽器中的Web創(chuàng)作和調(diào)試工具，它們?yōu)殚_發(fā)人員提供了對其Web應(yīng)用程序和瀏覽器的更深入訪問。
您可以在DevTools中進(jìn)行代碼的調(diào)試，接口的測試，性能的檢測等等強(qiáng)大的操作，極大程度的節(jié)省了開發(fā)者的時(shí)間。接下來，我將介紹幾種在實(shí)際開發(fā)中會(huì)非常有用的技巧和竅門~

認(rèn)識(shí)Chrome DevTools的控制面板

打開 DevTools的方式有很多中，適合自己的就是最好的，在這里我們介紹一下用快捷鍵的形式打開：

• Mac: Cmd + Opt + I
• Windowns: F12 or Ctrl + Shift + I
  
  image

從圖片中我們可以看到DevTools中有很多不用類型的面板，包括Elements panel, Console panel, Sources panel等等，接下來我們重點(diǎn)介紹一下。

Sources panel

1. 如何快速查找以及定位文件的具體行數(shù)？
   我們可以使用 進(jìn)行快速查找文件，然后在找到的文件的命令菜單中輸入

image

2. 如何對壓縮的文件進(jìn)行格式化？
   我們可以通過來進(jìn)行格式化壓縮后的文件

image

3. 如何在打斷點(diǎn)的時(shí)候，注入代碼？
   首先選擇要注入代碼的地方，，接下來便可以進(jìn)行相關(guān)代碼的注入。這樣就避免了我們要去項(xiàng)目中修改代碼~

image

4. 如何同時(shí)修改多行代碼？
   我們可以使用來添加多個(gè)光標(biāo)，并輸入想要修改的內(nèi)容。

image

5. 如何選中hover之后出現(xiàn)的元素？
   • 首先打開sources 面板
   • 然后在頁面上hover相關(guān)元素讓其顯示出tooltip的元素
   • 使用commond+\ 或者f8來暫停腳本的執(zhí)行
   • 回到Elements面板，去檢查tooltip的元素

image

Elements panel

1. 如何快速展開一層層的Dom呢?
   我們只需要使用就可以打開嵌套多層的閉合狀態(tài)下的Dom樹。

image

2. 如何在控制臺(tái)中實(shí)現(xiàn)花式截圖呢？
   • 我們可以選中需要被截圖的元素節(jié)點(diǎn)。
   • 通過Cmd + Shift + P打開命令菜單
   • 在命令菜單中輸入screenshot 選中你要的截圖類型，即可實(shí)現(xiàn)相關(guān)的截圖操作

image

截取特定節(jié)點(diǎn)對應(yīng)上圖命令是Screenshot Capture node screenshot，
通過 Screenshot Capture full size screenshot 命令可以截取全屏，不僅僅是可視區(qū)。

3. 如何更改元素顏色的格式呢？
   我們只需使用 去點(diǎn)擊元素的色塊，就可以實(shí)現(xiàn)元素RGBA, HSL, and hexadecimal的格式更換。

image

Console panel

1. 如何編輯頁面上的文字呢？
   當(dāng)我們希望整個(gè)頁面的都可以被編輯的時(shí)候，我們只需要在console面板中輸入就可以實(shí)現(xiàn)對整個(gè)頁面的編輯了。

2. 如何進(jìn)行數(shù)據(jù)的格式化復(fù)制呢？
   我們可以使用Devtools提供的工具函數(shù) 來實(shí)現(xiàn)，即使給copy函數(shù)傳入一個(gè)沒有格式的 JSON，也會(huì)返回格式化的結(jié)果。執(zhí)行完copy(obj)，我們可以直接粘貼~

image

3. 如何快速的獲取對象的key和value呢？
   我們可以也是使用Devtools提供的工具函數(shù) ,,具體事例如下：

image

Network panel

1. 怎樣重新發(fā)起xhr請求呢？
   以往我們都是通過刷新頁面，點(diǎn)擊按鈕的等方式去觸發(fā)xhr請求，現(xiàn)在我們可以使用google提供的 的方式去發(fā)起一條新的請求。
   • 只需要選中要重新請求的鏈接
   • 右擊選中Replay XHR即可。

image

2. 怎樣自定義網(wǎng)絡(luò)限制的條件？
   當(dāng)你想測試一下自己的程序在具體的網(wǎng)絡(luò)條件下的表現(xiàn)，你就可以選擇自定義網(wǎng)絡(luò)的配置文件。
   • 在 Network panel中 點(diǎn)擊online,選擇其中的
   • 然后選擇在新的彈窗中點(diǎn)擊

   • 輸入自定義的相關(guān)條件即可

     
     
     image

總結(jié)

如您所見，Chrome DevTools具有眾多功能，可幫助大家更好地開發(fā)，更快地調(diào)試并更有效地衡量網(wǎng)站或應(yīng)用程序的性能,
上面提到的技巧只是眾多可用功能中的幾個(gè)。如果大家在實(shí)際開發(fā)中用到了有意思的DevTools功能，歡迎在下面的評論區(qū)中分享哦~