Chrome DevTools功能介紹
1、Elements 元素：檢查、調整頁面，調試DOM，調試CSS
2、Network 網絡： 調試請求，了解頁面靜态資源分布，網頁性能檢測
3、Console 控制台：調試JavaScript、檢視log日志，互動式代碼調試
4、Sources 源代碼資源：調試JavaScript頁面源代碼，斷點調試
5、Application 應用： 檢視調試用戶端存儲，Cookie，LocalStorage，SessionStorage
6、Performance 性能：檢視頁面性能細節，細粒度對網頁載入進行性能優化（高階）
7、Memory 記憶體 CPU分析，記憶體堆棧分析器（高階）
8、Security 安全：頁面安全，證書
9、Audits 性能分析，使用Google Lighthouse輔助性能分析，給出優化建議（高階）
打開Chrome開發者工具方式
1、菜單 -> 更多工具 -> 開發者工具
2、頁面右鍵 -> 檢查
3、快捷鍵
（1）打開最近關閉的狀态
Mac： Command + Option + I
Windows： Ctrl + Shift + I
（2）快速進入Elements檢視DOM或樣式
Mac：Command + Option + C
Windows： Ctrl + Shift + C
（3）快速進入Console檢視log運作JavaScript
Mac：Command + Option + J
Windows： Ctrl + Shift + J
（4）切換開發者工具位置
Mac：Command + Option + D
Windows： Ctrl + Shift + D
在Console中通路DOM節點
1、document.querySelectAll
2、使用$0通路選中的元素
3、拷貝 -> JS Path
在DOM中斷點調試
1、屬性修改時打斷點 break on -> attribute modifications
2、節點删除時打斷點 break on -> node removal
3、子樹修改時打斷點 break on -> subtree modifications
CSS調試
1、提升優先級
!important
2、動畫效果
animation.css
https://daneden.github.io/animate.css/Console面闆
1、運作JavaScript代碼，互動式程式設計
2、檢視程式中列印的Log日志
3、斷點調試代碼Debugging
// 檢視cookie
document.cookie
// 選擇元素
document.querySelectorAll("img")
// shift + enter 換行不執行
// 斐波那契
var fibo = function(n){
return n<3 ? 1 : fibo(n-1) + fibo(n-2);
} Console列印Log日志
// 1、資訊 ,支援多個參數
console.log("hello", ", ", "world")
// hello , world
// 變量替換
var s = "hi";
console.log("%s hello", s);
// hi hello
// 2、警告
console.warn()
// 3、錯誤
console.error()
// 4、表格形式列印json
console.table({name: "tom"})
// 5、group資訊組
console.group("start");
console.log("log");
console.info("info");
console.groupEnd("start");
// 6、自定義樣式
console.log("%c這是綠色的日志", "color: green")
document.querySelector("#log").addEventListener("click",()=>{
console.log("log");
})
// 斷言
console.assert(1===2)
// 運作時間
console.time()
// do something
console.timeEnd()
// 清屏
console.clear() 調試JavaScrip基本流程
1、console.log() 或者 alert() 運作時調試
2、JavaScript斷點調試
3、運作時變量調試，修改源代碼臨時儲存調試
（1）debugger
（2）事件斷點
（3）源代碼斷點
<html>
<body>
<!-- 電腦執行個體 -->
<input type="text">
<input type="text">
<button>計算</button>
<p></p>
<script>
// 選取button元素
var button = document.querySelector("button");
// 添加按鈕點選事件
button.addEventListener("click", () => {
var inputs = document.querySelectorAll("input");
let a = parseInt(inputs[0].value);
let b = parseInt(inputs[1].value);
document.querySelector("p").textContent = a + b;
})
</script>
</body>
</html> Snippets
// 添加jQuery
let script = document.createElement("script");
script.src="https://code.jquery.com/jquery-3.4.1.js";
// 防止 CDN 篡改 javascript
script.integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=";
// 會發起一個跨域請求（即包含Origin: HTTP頭）。
// 但不會發送任何認證資訊（即不發送cookie, X.509證書和HTTP基本認證資訊）。
// 如果伺服器沒有給出源站憑證（不設定Access-Control-Allow-Origin: HTTP頭），這張圖檔就會被污染并限制使用。
script.crossOrigin = "anonymous";
document.head.appendChild(script);
Application用戶端存儲
1、Cookies
// 添加cookie
document.cookie="a=2"
// 擷取cookie
document.cookie 2、LocalStorage 永久存儲
LocalStorage.getItem("key")
LocalStorage.setItem("key", "value") 3、SessionStorage 臨時存儲
sessionStorage.setItem("key", "value")
sessionStorage.getItem("key") 其他
網頁截屏
comamnd + shifit +p
搜尋 Capture full size screenshot
移動端開發調試
Sensors
NetWork conditions
![Windows下VS開發環境環境安裝工程項目設定關于Debug和Release的提示[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)