開發工具之 Chrome

人的一輩子，總有些東西比生命重要        ---  全民目睹

本文參考了Chrome 使用技巧

建議看下官方的資料，畢竟是一手資料，大體瞄了一下，乾貨挺多。

當我仔細研究了一下 Chrome 的功能，對 Google 粑粑的敬仰猶如滔滔江水綿延不絕。 能體會爲啥有的人說瀏覽器只有 Chrome 一種了。接下來我將從開發使用的角度向你展示 Chrome 的黑科技。爲了測試功能，頁面寫的太醜，見諒啊 😂😂😂

環境基於 MacOs 10.14.5 ,Chrome 75.0.3770.142

演示代碼

Elements

改變元素僞類

div 背景顏色爲紅色，當鼠標移入背景變成黃色

查看元素綁定的事件

// 對 div 綁定了事件
const myDiv = document.querySelector("body > div");
myDiv.addEventListener('click', (ev) => {
    console.log('addEventListener-click');
});
myDiv.onclick = (ev) => {
    console.log('onclick');
}
複製代碼

對元素打斷點，監聽屬性和結構變化

div 綁定事件，點擊會增長 div 的屬性和追加 span，

查看元素的屬性和方法

在 Chrome 編輯 Css,直接保存到 Css 文件中

還記得前段時間，在 Chrome 編輯好 Css 再 Copy 到 VsCode, 手動捂臉😂😂😂

經過在 Sources 添加本地文件夾，便可在 Elements/Styles 中編輯 Css 會保存到你對應的文件中

Sources

運行代碼片斷

Sources 中的代碼片斷運行，能夠在任意見面生效

(()=>{
    const body=document.querySelector("body");
     const span = document.createElement('span');
    span.innerHTML = Math.random();
    body.append(span);
})();
複製代碼

重寫 css 和 js 來源

當你開發的已經部署到線上，若是須要修改，能夠重寫 css 和 js 來源，在本地修改好，再替換線上便可

斷點調試及加入條件斷點

有的時候咱們調試代碼，須要根據條件來進行調試，如果在 for 循環，一步一步去調試真的會瘋的

加入標記，執行到標記時，打印標記的變量

有的時候呢，代碼執行的時候，咱們但願打印某個變量，可是代碼中沒有 log ,再去改代碼多費勁。加入標記，直接打印你想要的東西

查看 css 和 js 執行覆蓋率

有的時候爲了性能優化，咱們會將 css 和 js 拆分,能夠經過 Chrome 進行分析

Network

查看頁面加載訪問你的資源及請求。

Application

Performance

Google 官方資料

看了官方的資料作的挺詳細，Google 翻譯下