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

資訊專欄INFORMATION COLUMN

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

svtter / 2026人閱讀

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

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

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

關(guān)于DevTools插件

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

下面推薦幾款DevTools插件，有些是博主親自試用過的，希望對(duì)大家的開發(fā)調(diào)試有幫助。

jQuery Audit

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

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

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

JS Runtime Inspector

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

如圖所示，可以通過對(duì)象名稱和值來匹配查找，點(diǎn)擊搜索后會(huì)在控制臺(tái)輸出查找到的結(jié)果。

Devtools redirect

安裝地址：Chrome應(yīng)用商店鏈接
Devtools redirect可以幫你給頁面上的網(wǎng)絡(luò)連接重定位。事實(shí)上網(wǎng)絡(luò)請(qǐng)求重定位的功能，可以用fiddler或者ngix輕松實(shí)現(xiàn)，但Devtools redirect可以讓你直接在瀏覽器上配置這些重定位。

jQuery Debugger

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

2. 查看頁面某個(gè)元素的jQuery對(duì)象屬性。這有點(diǎn)類似前面說過的jQuery Audit插件。

Grunt DevTools

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

詳細(xì)描述可以查看官方文檔。

CoffeeScript Console

安裝地址：Chrome應(yīng)用商店鏈接
有了它，你可以在DevTools上直接執(zhí)行CoffeeScript和JavaScript之間的代碼轉(zhuǎn)換。

Angular Batarang

安裝地址：Chrome應(yīng)用商店鏈接
這個(gè)不用解釋，開發(fā)和調(diào)試Angular.js應(yīng)用的神器。

類似的針對(duì)不同js框架的調(diào)試工具還有：Backbone DevTools 、 KnockoutJS Context

DevTools Theme

最后介紹的不是DevTools的插件，而是主題。大家或許有疑問：這個(gè)由什么用呢？嗯，沒錯(cuò)，就是裝B用的。當(dāng)別人看著你在調(diào)試網(wǎng)頁的時(shí)候，打開的Chrome開發(fā)工具竟然是如此高大上。。。
ZeroDarkMatrix主題：Chrome應(yīng)用商店鏈接

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

總結(jié)

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

參考

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

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

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

相關(guān)文章

  • 推薦幾款好用的Chrome插件

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

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

  • 推薦幾款好用的Chrome插件

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

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

  • 推薦幾款好用的Chrome插件

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

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

  • 五種前端開發(fā)必備的調(diào)試技術(shù)

    摘要：在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。移動(dòng)調(diào)試斷點(diǎn)斷點(diǎn)方法遠(yuǎn)程映射本地調(diào)試在移動(dòng)上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了。 在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。 Weinre移動(dòng)調(diào)試 DOM 斷點(diǎn) debugger斷點(diǎn) native方法hook 遠(yuǎn)程映射本地調(diào)試 Weinre 在移動(dòng)上面開...

    張紅新 評(píng)論0 收藏0

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

0條評(píng)論

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