資訊專欄INFORMATION COLUMN
摘要：下面推薦幾款插件，有些是博主親自試用過的，希望對大家的開發(fā)調(diào)試有幫助。這有點類似前面說過的插件。類似的針對不同框架的調(diào)試工具還有最后介紹的不是的插件，而是主題。總結(jié)好的，這次的插件就推薦了這幾個。
Web前端開發(fā)過程中必然會用到Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools，使用它作為Web前端開發(fā)性能調(diào)試的必備工具。就連隔壁的產(chǎn)品小哥都知道打開F12改一下頁面元素的標簽代碼就能看到頁面效果，這年頭誰不會用Chrome開發(fā)者工具呀。
但是Chrome能做的遠不止你平常用的那么簡單，這一個小小的開發(fā)工具集成了很多高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，希望大家一起學(xué)習學(xué)習。
關(guān)于DevTools插件應(yīng)用于Chrome開發(fā)者工具的插件不同于普通的Chrome應(yīng)用或者插件，它是給你的Chrome DevTools擴展更多的功能，方便你查看和調(diào)試web程序。它的安裝方法跟Chrome應(yīng)用的安裝方法是一樣的，可以通過Chrome應(yīng)用商店或者直接crx安裝文件來安裝。
下面推薦幾款DevTools插件，有些是博主親自試用過的，希望對大家的開發(fā)調(diào)試有幫助。
jQuery Audit安裝地址：Chrome應(yīng)用商店鏈接
jQuery Audit是讓你可以在DevTools查看頁面節(jié)點的jQuery屬性和數(shù)據(jù)，方便你調(diào)試使用jQuery庫的web應(yīng)用。你可以在上面看到你選中的頁面元素的jQuery的events、data等屬性。例如，很多人都喜歡用$.data()來讓jQuery節(jié)點對象緩存一些數(shù)據(jù)，通過jQuery Audit你可以很方便地看到你緩存的數(shù)據(jù)。
jQuery Audit會自動在Elements面板的最前面加上window和document對象，這對你調(diào)試全局的對象很有幫助。例如，出于對性能的考慮，當你想查看綁定在window上綁定了哪些事件的時候，jQuery Audit可以幫你找到。
其他詳細的用法可以查看官方文檔。
安裝地址：Chrome應(yīng)用商店鏈接
JS Runtime Inspector讓你可以在DevTools上直接通過關(guān)鍵詞來搜索頁面上JavaScript對象。當你想知道此時你的程序中某個JavaScript對象的屬性和數(shù)據(jù)，然而你并不知道它所在哪個作用域，只知道對象名稱，因而你不能在控制臺用window.xxxObj的方式來訪問這個對象，所以此時你可以借助JS Runtime Inspector來查找這個對象了。
如圖所示，可以通過對象名稱和值來匹配查找，點擊搜索后會在控制臺輸出查找到的結(jié)果。
安裝地址：Chrome應(yīng)用商店鏈接
Devtools redirect可以幫你給頁面上的網(wǎng)絡(luò)連接重定位。事實上網(wǎng)絡(luò)請求重定位的功能，可以用fiddler或者ngix輕松實現(xiàn)，但Devtools redirect可以讓你直接在瀏覽器上配置這些重定位。
安裝地址：Chrome應(yīng)用商店鏈接
jQuery Debugger顧名思義就是幫你debug jQuery啦:-) 它主要有兩大功能：
1. 通過選擇器字符串來查找頁面上的某個元素，等同于你在代碼里寫$("ul>li")這樣的方式。
2. 查看頁面某個元素的jQuery對象屬性。這有點類似前面說過的jQuery Audit插件。
安裝地址：Chrome應(yīng)用商店鏈接
一個可以在DevTools快速運行和查看Grunt任務(wù)的插件。有了它，你就不用經(jīng)常地在瀏覽器工具、terminal和編輯器上來回切換窗口了。
詳細描述可以查看官方文檔。
安裝地址：Chrome應(yīng)用商店鏈接
有了它，你可以在DevTools上直接執(zhí)行CoffeeScript和JavaScript之間的代碼轉(zhuǎn)換。
安裝地址：Chrome應(yīng)用商店鏈接
這個不用解釋，開發(fā)和調(diào)試Angular.js應(yīng)用的神器。
類似的針對不同js框架的調(diào)試工具還有：Backbone DevTools 、 KnockoutJS Context
最后介紹的不是DevTools的插件，而是主題。大家或許有疑問：這個由什么用呢？嗯，沒錯，就是裝B用的。當別人看著你在調(diào)試網(wǎng)頁的時候，打開的Chrome開發(fā)工具竟然是如此高大上。。。
ZeroDarkMatrix主題：Chrome應(yīng)用商店鏈接
另外還有：
Dracula主題：Chrome應(yīng)用商店鏈接
Flatland主題：Chrome應(yīng)用商店鏈接
安裝這些主題的方法可以查看ZeroDarkMatrix的說明。
好的，這次的DevTools插件就推薦了這幾個?？偟膩碚f，Chrome瀏覽器真的很強大，DevTools工具為我們的開發(fā)調(diào)試工作帶來很多方便。如果大家對于如何開發(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/87533.html
摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設(shè)置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發(fā)卸載等功能。 ‘工欲善其事，必先利其器’。優(yōu)秀的開發(fā)者不僅體現(xiàn)在其在技術(shù)方面的精通，還體現(xiàn)在其對各種開發(fā)工具的充分了解與使用，這會讓其開發(fā)效率事半功倍。作為一個前端開發(fā)者，平...
摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設(shè)置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發(fā)卸載等功能。 ‘工欲善其事，必先利其器’。優(yōu)秀的開發(fā)者不僅體現(xiàn)在其在技術(shù)方面的精通，還體現(xiàn)在其對各種開發(fā)工具的充分了解與使用，這會讓其開發(fā)效率事半功倍。作為一個前端開發(fā)者，平...
摘要：今天就來跟大家分享一下工作中用到的幾款插件。是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁請求的插件。俗稱油猴子，是一款功能非常強大的插件，他包含方便的腳本管理腳本概覽設(shè)置多樣性腳本自動更新安全兼容性同步編輯器語法檢查快速開發(fā)卸載等功能。 ‘工欲善其事，必先利其器’。優(yōu)秀的開發(fā)者不僅體現(xiàn)在其在技術(shù)方面的精通，還體現(xiàn)在其對各種開發(fā)工具的充分了解與使用，這會讓其開發(fā)效率事半功倍。作為一個前端開發(fā)者，平...
摘要：在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。移動調(diào)試斷點斷點方法遠程映射本地調(diào)試在移動上面開發(fā)調(diào)試是很復(fù)雜的，所以就有了。 在前端開發(fā)中，調(diào)試技術(shù)是必不可少的技能，本文將介紹五種前端開發(fā)必備的調(diào)試技術(shù)。 Weinre移動調(diào)試 DOM 斷點 debugger斷點 native方法hook 遠程映射本地調(diào)試 Weinre 在移動上面開...
閱讀 3771·2021-11-11 10:58
閱讀 2562·2021-09-22 15:43
閱讀 2920·2019-08-30 15:44
閱讀 2291·2019-08-30 13:08
閱讀 1889·2019-08-29 17:28
閱讀 954·2019-08-29 10:54
閱讀 733·2019-08-26 11:46
閱讀 3557·2019-08-26 11:43
