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

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

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

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

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

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

Sources panel

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

image

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

image

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

image

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

image

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

image

Elements panel

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

image

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

image

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

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

image

Console panel

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

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

image

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

image

Network panel

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

image

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

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

     
     
     image

總結(jié)

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