四個實用但容易忽略的Chrome開發(fā)工具特性

xuxueli 發(fā)布于2019-08-21 12:07 / 2836人閱讀

摘要：開發(fā)工具是基于瀏覽器，幫助開發(fā)人員調(diào)試代碼的控制面板。改變元素狀態(tài)右擊元素，會列出功能選項，其中有一項名為，展開子菜單可以看到幾種常見的偽類。當嘗試改變元素時，給元素添加的斷點便會觸發(fā)。

Chrome開發(fā)工具是基于Chrome瀏覽器，幫助開發(fā)人員調(diào)試代碼的控制面板。它的功能很豐富以至于我們很難面面俱到，這里就有幾個不太明顯但很實用的功能。

改變DOM元素狀態(tài)

右擊DOM元素，會列出功能選項，其中有一項名為"Force Element State"，展開子菜單可以看到幾種常見的偽類：:active, :hover, :focus, and :visited。

如果在你的CSS或JS中想要調(diào)試這些偽類效果，就可以使用這個功能。

DOM斷點

我們熟悉JS的斷點調(diào)試，但很少有人知道DOM也可以斷點調(diào)試！依然右擊DOM元素，可以看到一個名為Break on的選項，展開有Subtree Modifications，Attributes Modifications以及Node Removal三個選項。

當JS嘗試改變DOM元素時，給元素添加的斷點便會觸發(fā)。

Subtree Modifications，當添加，改變，刪除子元素時觸發(fā)

Attributes Modifications，當元素屬性被改變時觸發(fā)

Node Removal，當移除元素時觸發(fā)

Console API

我們最為熟悉的一定是console.log，但console的方法遠遠不止這一個，有興趣的可以看看官方文檔。這里再講一個很實用的方法——console.count，它可以統(tǒng)計代碼塊執(zhí)行的次數(shù)，如果你懷疑一個函數(shù)是不是被執(zhí)行了很多次，用它就可以很輕松的統(tǒng)計出來。

function login(user) {
    console.count("Login called");
    // login() code...
}

這樣，每次調(diào)用login時都會在控制臺打印出次數(shù)

Audits

Audits可以檢查頁面的性能方面存在的問題，并給出優(yōu)化意見，比如CSS和JS的引入位置，是否開啟了Gzip壓縮，是否很好地利用了瀏覽器緩存以及沒有應用到的CSS規(guī)則等，是不是很智能很強大呢？

好了，看了這四個，也許你會開眼界，也許會覺得小兒科，但chrome開發(fā)者工具的強大之處絕不僅此。如果你有推薦的實用功能歡迎在評論分享出來。

原文

云服務器 GPU云服務器忽略css特性實用工具四個節(jié)點的服務器 php忽略警告的設置

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87451.html

四個實用但容易忽略的Chrome開發(fā)工具特性

摘要：開發(fā)工具是基于瀏覽器，幫助開發(fā)人員調(diào)試代碼的控制面板。改變元素狀態(tài)右擊元素，會列出功能選項，其中有一項名為，展開子菜單可以看到幾種常見的偽類。當嘗試改變元素時，給元素添加的斷點便會觸發(fā)。 Chrome開發(fā)工具是基于Chrome瀏覽器，幫助開發(fā)人員調(diào)試代碼的控制面板。它的功能很豐富以至于我們很難面面俱到，這里就有幾個不太明顯但很實用的功能。改變DOM元素狀態(tài) 右擊DOM元素，會列出...

singerye 2019-08-01 14:35 評論0 收藏0
Vue中你不知道但卻很實用的黑科技

摘要：最近數(shù)月一直投身于的開源工作中，完成了大大小小多個組件，在組件化開發(fā)中積累了不少經(jīng)驗。在開發(fā)全局提示組件通知提醒組件對話框組件時，內(nèi)部都是使用來渲染，但卻是來隱式地創(chuàng)建這些實例，這樣我們就可以像標題這樣使用，但其內(nèi)部還是通過來管理。最近數(shù)月一直投身于 iView 的開源工作中，完成了大大小小 30 多個 UI 組件，在 Vue 組件化開發(fā)中積累了不少經(jīng)驗。其中也有很多帶有技巧性和黑科...

Heier 2019-08-22 10:47 評論0 收藏0
Vue中你不知道但卻很實用的黑科技

摘要：最近數(shù)月一直投身于的開源工作中，完成了大大小小多個組件，在組件化開發(fā)中積累了不少經(jīng)驗。在開發(fā)全局提示組件通知提醒組件對話框組件時，內(nèi)部都是使用來渲染，但卻是來隱式地創(chuàng)建這些實例，這樣我們就可以像標題這樣使用，但其內(nèi)部還是通過來管理。最近數(shù)月一直投身于 iView 的開源工作中，完成了大大小小 30 多個 UI 組件，在 Vue 組件化開發(fā)中積累了不少經(jīng)驗。其中也有很多帶有技巧性和黑科...

NicolasHe 2019-08-01 16:03 評論0 收藏0
實用Javascript調(diào)試技巧分享

摘要：見過太多同學調(diào)試只會用簡單的甚至，看著真為他們捉雞。。下面我就分享一些實用且聰明的調(diào)試技巧，希望能讓大家調(diào)試自己代碼的時候更加從容自信。其實提供了文件的搜索功能，只不過大部分時候我們給忽略了。。見過太多同學調(diào)試Javascript只會用簡單的console.log甚至alert，看著真為他們捉雞。。因為大多數(shù)同學追求優(yōu)雅而高效地寫代碼，卻忽略了如何優(yōu)雅而高效地調(diào)試代碼，不得不說是有點...

jk_v1 2019-08-23 18:06 評論0 收藏0
w3school容易忽略的東西

摘要：和事件可用于處理。循環(huán)中的代碼塊將針對每個屬性執(zhí)行一次。返回值是被找到的值。是被視為節(jié)點樹的。將新元素作為父元素的最后一個子元素進行添加。返回指定的屬性值。把指定屬性設置或修改為指定的值。年齡必須是與之間的數(shù)字。 JS JS DOM onload 和 onunload 事件會在用戶進入或離開頁面時被觸發(fā)。onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)...

shadowbook 2019-08-20 12:07 評論0 收藏0