聽說讀寫

本文介紹一些入門的HTML,css和Javascript調試技巧。

希望能讓初學者有所收獲，少走一點彎路。

個人推薦Chrome作為開發工具（FF可以使用FireBug，IE8和之后的版本也有自己的調試工具）

1.HTML的調試

• 將鼠標放在任意元素上，右鍵Inspect Element，即可查看該元素的HTML內容。（也可以通過F12打開開發者工具）

　　效果如下

• 在Elements面板中 將鼠標放在任意元素上，HTML界面上對應的元素會被選中
• 右擊元素，可以直接修改或者是移除元素，修改后的元素效果會馬上反應在頁面上
   

2.CSS的調試

• 在開發者工具的右側面板可以找到對應的CSS調試框

• Styles分類下可以看到該元素的詳細樣式，而且你還可以直接修改它 （點擊一個樣式，或者雙擊空白處）
• 樣式的右側會提示該樣式來自哪個文件的哪一行
• 被加了刪除線的樣式是無效的，或者被覆蓋了
• 將鼠標放在樣式上的時候，右側會出現一個CheckBox，用于啟用和禁用當前樣式
   

3.Javascript調試

• 首先是Javascript調試框　　

• 左側是javascript面板，可以加斷點（綠色），當前正運行到的行（紅色）
• 位于script.js的下拉框可以選擇不同的js文件調試，（如果你的js文件有結構錯誤，可能沒法被加載到列表中）
• 右上方是javascript內容搜索
• Watch Expressions可以運行和查看表達式和變量
• Call Stack顯示當前堆棧，單擊可以切換到堆棧中的不同位置
• Scope variables，顯示當前上下文變量
• Breakpoints， 斷點
• console.log該方法會輸出到Console中，（放棄alert吧，用調試和console.log）
• 在Console可以直接運行javascript，很方便 (如果你要驗證js，不需要寫個新頁面，直接在這里運行就是了)

• 現在可以很方便的調試Javascript了，不過有的時候，你發現頁面上元素被修改了，但是你不知道被什么代碼修改了，那可以給DOM增加斷點

• 當ul中的元素被改變的時候觸發斷點，如下：（注意右邊的堆棧，那可以幫你找到答案：誰動了你的奶酪）　　

還有很多高級功能，例如資源和網絡分析，javascript性能分析（內存泄漏）等等，有興趣研究下

 英文好的朋友看看樓下推薦的文章,挺詳細的chrome調試