1.開發(fā)工具

文本編輯器 Sublime Text

優(yōu)點(diǎn)：跨平臺，啟動(dòng)快；多行選擇（操作方便）；各種實(shí)用插件；Snippets（代碼片段）；支持VIM（文本編輯器，代碼補(bǔ)完，編輯及錯(cuò)誤跳轉(zhuǎn)等方便編程功能豐富）兼容模式

常用插件

Package Control 管理工具，可添加、更新、卸載相應(yīng)插件。

Emmet 快速編寫HTML和CSS代碼

DocBlockr 方便產(chǎn)生函數(shù)注釋

SideBarEnhancement 右鍵菜單增強(qiáng)工具

Terminal 可以在Sublime中直接打開命令行終端

2.調(diào)試工具

每個(gè)瀏覽器都自帶調(diào)試工具，以Chrome為例介紹調(diào)試工具

Emmet：用來調(diào)試HTML和CSS

Network：可看網(wǎng)站所有的網(wǎng)絡(luò)請求，和后端調(diào)一些接口的時(shí)候也會用到這個(gè)面板

Sources：可以看到網(wǎng)站所有的資源，在JavaScript文件中可以設(shè)置斷點(diǎn)調(diào)試

Console：類似一個(gè)命令行工具，可以直接寫JavaScript代碼執(zhí)行，另外在JavaScript文件中也經(jīng)常輸出一些內(nèi)容方便調(diào)試，經(jīng)常和Sources面板結(jié)合起來調(diào)試JavaScript

Resources（Application）：網(wǎng)站的本地?cái)?shù)據(jù)資源，cookies，storage等

Timeline，Profile（Memory），Audits：主要用來調(diào)試頁面的性能

IE瀏覽器

IE早期的版本不會自動(dòng)更新

IE8+ 版本自帶調(diào)試工具，可調(diào)式IE7-電腦安裝版本

IE6 IETester查看IE6效果，安裝IE Develop Toolbar 進(jìn)行調(diào)試

F12 打開調(diào)試器，DOM資源管理器（Elements），樣式（Styles修改CSS）