標籤：

對於前端，有哪些好的chrome插件或應用可以使用？

01-02

對於前端工程師，有哪些chrome插件或應用可以輔助我們開發或者說提高我們的工作效率？我在前端開發工作中就使用json數據格式化插件和postman應用等。大家有比較好的插件或應用，拋出來一起討論學習嗎？

Wappalyzer

一款可以在瀏覽器里查看當前網站所使用技術棧/工具庫的插件。

效果預覽：

可以看到知乎用了 React

如果網站用了 CMS 你就能看到更詳細的信息

同時官網還統計收集了各類工具庫目前在網路上的佔有率：

可怕的 jQuery 重構的道路任重而道遠

感興趣的同學可以在官網查看其他上千種各類工具庫的統計數據：Wappalyzer Applications

你可以直接在 Chrome 商店下載安裝：

Wappalyzerchrome.google.com

謝邀~

除去Vue，React和Angularjs（強烈推薦ng-inspect for AngularJS 1.x）特定的調試插件，以及在Github中方便使用的相關插件外，主要想說四個。

1、 Window Resizer 可以快速切換到特定的窗口大小，便於測試或者瀏覽響應式。

2、 Web Maker 前端的利器之一。之前一直（n久之前...）不肯從Firefox遷移到Chrome的原因之一就是沒有找到那時候在Firefox下的替換插件（燃鵝我已經忘記了在FF中叫什麼了2333），後來經過辛苦尋找，找到了這個。

前端的小夥伴都熟悉codepen或者jsfiddle，也就是提供在線寫demo，分享給別人用於展示或調試。而Web Maker作為本地插件，主要是可以充當草稿紙的作用，能讓你快速寫一個demo。優點有很多，比如實時預覽，支持多種快捷鍵，支持添加自定義庫等這些在jsfiddle常見的功能。

如果想要分享，它也支持！只要點擊一個按鈕即可原封不動地提交你所寫的內容到codepen，接下來就和使用codepen一樣了。

3、LocalStorage Monitor 方便查看localstorage

4、Web Developer 很多人之前推薦過，現在用的人比較少了吧。而我也只用過outline部分（比如標註出position: absolute的元素），常年是關閉狀態，但不可否認很強大，而且算是對Chrome devtool 的補充吧（個人認為）。

以上~歡迎補充。

謝邀，個人擴展控，在用的比較多，大部分是開源的，列舉可能有些非專業。

  1. React Vue Angular 的 dev-tools
  2. ChromeVox ，體驗一下網站的可用性
  3. ColorZilla ，顏色相關的 handy 工具集
  4. MeasureIt! ，尺子
  5. Restlet Client ，測試 REST API
  6. Cookie Hacker ，測試 Cookie
  7. Octotree ，文件樹，逛 Github 必備，省時省力
  8. Notifier for GitHub，桌面通知
  9. Release Notifier for Github ，桌面通知，這個是我寫的，可以按 major minor patch 訂閱
  10. Saladict ，網頁和 PDF 劃詞翻譯，這個也是我寫的，ff 版在開發中
  11. Personal Blocklist (by Google) ，提高搜索效率
  12. Vimium ，提高瀏覽效率
  13. Awesome Screenshot ，截圖、錄製
  14. OneTab ，以前查資料經常密密麻麻一推 tab，用這個很清爽
  15. Mini Y ，浮動 YouTube 視頻
  16. Reddit Enhancement Suite 和 眼不見心不煩，更舒服地吃瓜觀戰

瀉藥。

表示用的插件不多，個人覺得 Chrome 的 Devtools 都開發已經非常之友好了。當然，我也希望大夥能把一些好用的 Chrome 插件在這裡發一下。目前我自己就用了三個。

QR Code：用於在線生成頁面二維碼，方便在線掃描預覽

Vuejs devtools：用過 vue 的都會下一個的~

掘金插件：這個算是掘金精品了，安裝好之後打開新標籤頁會有一堆好東西做推薦，幫助隨時關注一些好文及一些好開源項目

如果有人有好用的，歡迎評論裡面或者直接回答裡面直接給出。

謝邀拉.. : )

有噢，強推一個Chrome前端插件：FE助手

估計要越過高牆才能訪問噢

可能我只用過這個吧，所以會推薦它，包含了很多前端常用的功能

我覺得超屌也

我常用的有字元串編解碼 Json串格式化（伺服器返回數據方便查看的） 二維碼生成器（移動端調試用的） 時間戳轉換 圖片Base64

有一個我感覺挺屌的是頁面性能檢測相關的，比如說檢測當前正在碼字的頁面

能夠監測到DNS解析消耗的時間 能夠監測到從TCP三次握手和HTTP數據傳輸所消耗的時間

還有前端資源載入和頁面渲染的時間 哈哈哈 幫助很大 : )

瀉藥

目前我在用而且覺得比較有幫助的幾個插件有：

  • web前端助手（https://www.baidufe.com/fehelper）
  • github的代碼預覽插件（https://chrome.google.com/webstore/detail/insightio-for-github/pmhfgjjhhomfplgmbalncpcohgeijonh），這個在看代碼的時候會比較方便，不需要直接切換
  • github信息預覽插件（https://chrome.google.com/webstore/detail/github-hovercard/mmoahbbnojgkclgceahhakhnccimnplk）,這個也是很贊的，直接在github上不需要點開就可以看到一些follower信息了
  • 豌豆莢直搜(https://chrome.google.com/webstore/detail/%E8%B1%8C%E8%B1%86%E8%8D%9A%E7%9B%B4%E6%90%9C/eafahahbkiojhlhllnpajnnpfngkpdfn）,可以直接搜到應用並下載，簡潔方便，哈哈
  • 二維碼生成器（https://chrome.google.com/webstore/detail/uc-qr-code/nhelohnehpahakjoklmodmogclacjgdj），最好用的二維碼生成器，直接點擊就可生成，很便捷
  • Momentum（https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca）

github 查看開發者

Justineo/github-hovercard

Vue,React的DevTool就不說了，可以推薦一款批量下圖的插件

Fatkun

然後再推薦一個可以不翻牆下載谷歌插件的網址

GetCrx.cngetcrx.cn

搜索就可以下載谷歌插件。

記得下完了插件，可以

用拖拽的方式安裝插件。

Widow Resizer 改變窗口大小時，隨時查看具體尺寸。

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?utm_source=chrome-app-launcher-info-dialogchrome.google.com

Resize Widow:和前面一個類似，但是這個對BootStrap 框架的,快速切換斷點。

不太愛用插件。作用不大，不是愛折騰的人

有很多 但是一般用歐朋

沒人說說Sizzy嗎? 測試自適應插件, chrome安裝插件後只需點擊圖標啟動就可以模擬各個屏幕下頁面的狀態. 還能模擬IOS鍵盤的出現, 整體頁面的縮放. 一目了然挺便利的..

pageruler

現在的chrome已經不支持改編碼了，可以使用這個插件

網頁右鍵使用

沒用過插件，Dev Tool足夠。

推薦閱讀：

※HTML & CSS 現在還多人用嗎？
※react.js在伺服器端渲染有什麼好處？渲染是怎麼個流程？
※A && B || C 的效率比 A ? B : C 更高嗎？
※angular 和 React 想選擇一個學習，哪個比較好？
※如何評價Node.js的新fork ayo.js?

TAG:GoogleChrome | JavaScript | 插件 | 前端工程師 | Chrome擴展程序 |