【轉】HTML, CSS和Javascript調試入門

標籤：

轉 http://www.cnblogs.com/PurpleTide/archive/2011/11/25/2262269.html

 

HTML, CSS和Javascript調試入門

本文介紹一些入門的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調試

 

http://www.codeproject.com/KB/trace/BeginChromeDebug.aspx

【轉】HTML, CSS和Javascript調試入門