Web開發（調試方法 F12）

參考：

• 參考：MDN 調試HTML
• 參考：什么是瀏覽器開發者工具？
• 參考：檢查和編輯頁面與樣式
• 工具參考：標記驗證服務
• 工具參考：直接輸入驗證（直接輸入HTML源碼進行在線檢查）
• 參考：谷歌瀏覽器調試工具的13個Tips
• 瀏覽器參考：Chrome
• 瀏覽器參考：Chrome (DEV)
• 瀏覽器參考：Chrome (Canary)

---

目錄：

• 1、相關快捷操作

---

1、相關快捷操作

1. F12進入調試界面。
2. 常用鼠標右擊→檢查，找到相應組件對應的HTML語言位置及其相應的屬性情況。
3. 調試界面console中，快捷鍵：ctrl+L為清屏操作。
4. 點擊調試界面左上角的箭頭，可以讓鼠標定位找到網頁中各個組件在HTML源代碼中的位置（或者鼠標右擊，選擇檢查）。
5. 使用左上角箭頭找到需求組件在HTML源代碼中的位置后，在console中輸入$0即代表所選中的組件。
6. 在console中輸入$("#id")，然后回車，可以看到當前組件的所有屬性，以及展開在__proto__找到相應屬性的配置方法。
   
   

   會出現較亂的Source源碼，可以點擊左下角的"{}"，即可展開為方便查看的形式：

   

   

7. F12進入調試界面，在Elements窗口中，鍵盤Ctrl+Shift+F，進行查找。或者在控制台Network中，Search/Filter中搜索JS文件名稱，找到該JS文件，並進入右擊Open in Source panel進入源碼調試。
8. 預覽頁面中，查看頁面（Page）是否有調用服務（Service）成功的方式：F12后，在Network中查看調用的服務，以及服務中傳入的參數（報表詳細信息，可以看到頁面調用的服務，以及傳入的參數信息）（如有報錯，在調試窗口的右上角可以看到有紅色×的 圖標，點擊紅色×進行調試）。
9. console.log("Hello, world!");或者console.error("Hello, world!");調試，在瀏覽器的F12的Console中刷新即可看到打印的調試信息（console.log("Hello, world!");需要在F12的Console中勾選info選項）。
   console.log("Hello, world!"); 用於輸出普通信息
   console.info("Hello, world!"); 用於輸出提示性信息
   console.error("Hello, world!"); 用於輸出錯誤信息
   console.warn("Hello, world!"); 用於輸出警示信息
   console.debug("Hello, world!"); 用於輸出調試信息
   console對象的上面5種方法，都可以使用printf風格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。
   console.log("%年%月%日", 2011, 3, 26); 
   console.log("圓周率是：%f", 3.1415926); 
   
10. F12 控制台引入jQuery庫
    

    var importJs=document.createElement('script') // 在頁面新建一個script標簽
    importJs.setAttribute("type","text/javascript") // 給script標簽增加type屬性
    importJs.setAttribute("src", 'http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js') // 給script標簽增加src屬性， url地址為cdn公共庫里的
    document.getElementsByTagName("head")[0].appendChild(importJs) // 把importJs標簽添加在頁面