成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xuxueli / 2846人閱讀

摘要：開發(fā)工具是基于瀏覽器，幫助開發(fā)人員調(diào)試代碼的控制面板。改變?cè)貭顟B(tài)右擊元素，會(huì)列出功能選項(xiàng)，其中有一項(xiàng)名為，展開子菜單可以看到幾種常見的偽類。當(dāng)嘗試改變?cè)貢r(shí)，給元素添加的斷點(diǎn)便會(huì)觸發(fā)。

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

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

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

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

DOM斷點(diǎn)

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

當(dāng)JS嘗試改變DOM元素時(shí)，給元素添加的斷點(diǎn)便會(huì)觸發(fā)。

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

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

Node Removal，當(dāng)移除元素時(shí)觸發(fā)

Console API

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

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

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

Audits

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

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

原文

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87451.html

相關(guān)文章

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

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

    singerye 評(píng)論0 收藏0

  • Vue中你不知道但卻很實(shí)用的黑科技

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

    Heier 評(píng)論0 收藏0

  • Vue中你不知道但卻很實(shí)用的黑科技

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

    NicolasHe 評(píng)論0 收藏0

  • 實(shí)用Javascript調(diào)試技巧分享

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

    jk_v1 評(píng)論0 收藏0

  • w3school容易忽略的東西

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

    shadowbook 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

xuxueli

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<