国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

singerye / 1576人閱讀

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

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

改變DOM元素狀態

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

如果在你的CSS或JS中想要調試這些偽類效果,就可以使用這個功能。

DOM斷點

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

當JS嘗試改變DOM元素時,給元素添加的斷點便會觸發。

Subtree Modifications,當添加,改變,刪除子元素時觸發

Attributes Modifications,當元素屬性被改變時觸發

Node Removal,當移除元素時觸發

Console API

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

</>復制代碼

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

這樣,每次調用login時都會在控制臺打印出次數

Audits

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

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

原文

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

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

相關文章

  • 四個實用容易忽略Chrome開發工具特性

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

    xuxueli 評論0 收藏0
  • Vue中你不知道卻很實用黑科技

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

    Heier 評論0 收藏0
  • Vue中你不知道卻很實用黑科技

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

    NicolasHe 評論0 收藏0
  • 實用Javascript調試技巧分享

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

    jk_v1 評論0 收藏0
  • w3school容易忽略東西

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

    shadowbook 評論0 收藏0

發表評論

0條評論

singerye

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<