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)