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

資訊專欄INFORMATION COLUMN

你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

svtter / 2005人閱讀

摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調試工具還有最后介紹的不是的插件，而是主題。總結好的，這次的插件就推薦了這幾個。

Web前端開發過程中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它作為Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的標簽代碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

但是Chrome能做的遠不止你平常用的那么簡單，這一個小小的開發工具集成了很多高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學習學習。

關于DevTools插件

應用于Chrome開發者工具的插件不同于普通的Chrome應用或者插件，它是給你的Chrome DevTools擴展更多的功能，方便你查看和調試web程序。它的安裝方法跟Chrome應用的安裝方法是一樣的，可以通過Chrome應用商店或者直接crx安裝文件來安裝。

下面推薦幾款DevTools插件，有些是博主親自試用過的，希望對大家的開發調試有幫助。

jQuery Audit

安裝地址：Chrome應用商店鏈接
jQuery Audit是讓你可以在DevTools查看頁面節點的jQuery屬性和數據，方便你調試使用jQuery庫的web應用。你可以在上面看到你選中的頁面元素的jQuery的events、data等屬性。例如，很多人都喜歡用$.data()來讓jQuery節點對象緩存一些數據，通過jQuery Audit你可以很方便地看到你緩存的數據。

jQuery Audit會自動在Elements面板的最前面加上window和document對象，這對你調試全局的對象很有幫助。例如，出于對性能的考慮，當你想查看綁定在window上綁定了哪些事件的時候，jQuery Audit可以幫你找到。

其他詳細的用法可以查看官方文檔。

JS Runtime Inspector

安裝地址：Chrome應用商店鏈接
JS Runtime Inspector讓你可以在DevTools上直接通過關鍵詞來搜索頁面上JavaScript對象。當你想知道此時你的程序中某個JavaScript對象的屬性和數據，然而你并不知道它所在哪個作用域，只知道對象名稱，因而你不能在控制臺用window.xxxObj的方式來訪問這個對象，所以此時你可以借助JS Runtime Inspector來查找這個對象了。

如圖所示，可以通過對象名稱和值來匹配查找，點擊搜索后會在控制臺輸出查找到的結果。

Devtools redirect

安裝地址：Chrome應用商店鏈接
Devtools redirect可以幫你給頁面上的網絡連接重定位。事實上網絡請求重定位的功能，可以用fiddler或者ngix輕松實現，但Devtools redirect可以讓你直接在瀏覽器上配置這些重定位。

jQuery Debugger

安裝地址：Chrome應用商店鏈接
jQuery Debugger顧名思義就是幫你debug jQuery啦:-) 它主要有兩大功能：
1. 通過選擇器字符串來查找頁面上的某個元素，等同于你在代碼里寫$("ul>li")這樣的方式。

2. 查看頁面某個元素的jQuery對象屬性。這有點類似前面說過的jQuery Audit插件。

Grunt DevTools

安裝地址：Chrome應用商店鏈接
一個可以在DevTools快速運行和查看Grunt任務的插件。有了它，你就不用經常地在瀏覽器工具、terminal和編輯器上來回切換窗口了。

詳細描述可以查看官方文檔。

CoffeeScript Console

安裝地址：Chrome應用商店鏈接
有了它，你可以在DevTools上直接執行CoffeeScript和JavaScript之間的代碼轉換。

Angular Batarang

安裝地址：Chrome應用商店鏈接
這個不用解釋，開發和調試Angular.js應用的神器。

類似的針對不同js框架的調試工具還有：Backbone DevTools 、 KnockoutJS Context

DevTools Theme

最后介紹的不是DevTools的插件，而是主題。大家或許有疑問：這個由什么用呢？嗯，沒錯，就是裝B用的。當別人看著你在調試網頁的時候，打開的Chrome開發工具竟然是如此高大上。。。
ZeroDarkMatrix主題：Chrome應用商店鏈接

另外還有：
Dracula主題：Chrome應用商店鏈接
Flatland主題：Chrome應用商店鏈接
安裝這些主題的方法可以查看ZeroDarkMatrix的說明。

總結

好的，這次的DevTools插件就推薦了這幾個。總的來說，Chrome瀏覽器真的很強大，DevTools工具為我們的開發調試工作帶來很多方便。如果大家對于如何開發DevTools插件有想法的話，可以去Chrome DevTools的官方文檔看看“如何開發DevTools插件”https://developer.chrome.com/extensions/devtools。

參考

http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/
https://developer.chrome.com/extensions/devtools

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

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

相關文章

  • 推薦幾款好用的Chrome插件

    摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網頁調試與發送網頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發卸載等功能。 ‘工欲善其事，必先利其器’。優秀的開發者不僅體現在其在技術方面的精通，還體現在其對各種開發工具的充分了解與使用，這會讓其開發效率事半功倍。作為一個前端開發者，平...

    fox_soyoung 評論0 收藏0

  • 推薦幾款好用的Chrome插件

    摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網頁調試與發送網頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發卸載等功能。 ‘工欲善其事，必先利其器’。優秀的開發者不僅體現在其在技術方面的精通，還體現在其對各種開發工具的充分了解與使用，這會讓其開發效率事半功倍。作為一個前端開發者，平...

    lpjustdoit 評論0 收藏0

  • 推薦幾款好用的Chrome插件

    摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網頁調試與發送網頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發卸載等功能。 ‘工欲善其事，必先利其器’。優秀的開發者不僅體現在其在技術方面的精通，還體現在其對各種開發工具的充分了解與使用，這會讓其開發效率事半功倍。作為一個前端開發者，平...

    wums 評論0 收藏0

  • 五種前端開發必備的調試技術

    摘要：在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。移動調試斷點斷點方法遠程映射本地調試在移動上面開發調試是很復雜的，所以就有了。 在前端開發中，調試技術是必不可少的技能，本文將介紹五種前端開發必備的調試技術。 Weinre移動調試 DOM 斷點 debugger斷點 native方法hook 遠程映射本地調試 Weinre 在移動上面開...

    張紅新 評論0 收藏0

發表評論

0條評論

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