想要成為前端大神需要那些工具，整理的很全面

工具

chrome dev tools：前端開發調試利器，著重注意幾個功能：

console（廢話）

elements:元素樣式調整，很常用

sources：代碼中添加斷點，單步調試，以及單步調試過程中查看內存中的對象

watch expression：通過表達式查看當前內存中的值

call stack：查看調用棧，開啟async，可以看異步調用棧（這個非常有用，尤其是ajax調試的時候）

scope variables：作用域鏈上的變量，非常有用

network：抓包查看每個請求，非常重要，前後端聯調必備

timeline：分析渲染、js執行等等各個階段，性能優化利器

emulation：模擬移動端環境，mobile頁面開發必備

想要系統學習web前端和免費學習資料的 可以加裙623966806

一些插件:

liveload: 修改頁面後自動刷新，不用按F5

dimensions：直接在頁面上測量的利器

livestyle：css樣式修改後自動起效果，不需要刷新，elements修改後也能同步到代碼中

image tool：測量，取色

UC二維碼：移動端調試掃碼必備

pagespeed，YSlow：頁面性能分析和優化插件

馬克飛象：優秀的在線markdown編輯器，快速寫週報，做記錄

sublime text2：編碼方便，插件多，速度快，性能好

emmet：提升html編碼速度必備

sublimelinter + 各種語言的lint和hint：代碼糾錯

一些snippets：自動補全，提升開發效率

Intellij IDEA和WebStorm：集成開發環境，集成了各種功能，開發比sublime要方便，但會比較吃性能

Mark Men：測量、取色、標註利器，拿到視覺稿之後第一個打開的軟件

GFW Fucker：我用紅杏，可以的話買個虛擬服務器當梯子

iHosts：非常優秀的hosts管理軟件，輕鬆修改hosts，開發調試必備

Charles：Mac 平臺最好用的抓包分析工具

Rythem：AlloyTeam出品的代理抓包軟件，非常輕量，安裝簡單，移動端（真機）開發調試很好用

Wunderlist：一個非常不錯的Todo List，任務、需求多的時候管理起來很方便

喜歡小編文章的歡迎關注，歡迎評論，歡迎轉發，小編會繼續努力的！！！！

想要學習瞭解前端的小夥伴注意了，每晚都有免費的公開課，可以點擊加入群

我們會與你詳細的免費分享前端當下的行業狀況，學習路線、就業路線和對Java未來的一些規劃讓自己儘量享受最高的待遇。