chrome devtools 可以檢查我們的htnl頁面，而devtools自身也是一個html頁面，可以通過 Ctrl shift I 快捷...
投稿
收錄了39篇文章 · 1人關(guān)注
-
調(diào)試chrome devtools面板自身
-
18. 隱藏網(wǎng)絡(luò)請求報錯的console.error
補充 在定位頁面無限重定向,比如一直跳轉(zhuǎn)登錄的時候,可以勾選上 Preserve log復選框,查看頁面信息在console中執(zhí)行代碼的上下文是...
-
27. 利用Quick Source 快速寫樣式
ctrl shift p 快速打開 quick source面板 在Element Style面板修改樣式可以與 該面板下的文件同步 修改好以后...
-
28. Chrome帶參數(shù)啟動--auto-open-devtools-for-tabs 新打開的標簽頁,帶上devtools工具比如新打開的頁面有重定向問題,但是由于沒有打...
-
29. 自定義Network面板的顯示列，展示我們關(guān)心的響應(yīng)頭
正常情況下我們需要查看詳情才能看到具體的信息，通過自定義Network面板的顯示列就可以在列表中展示我們關(guān)心的內(nèi)容。 討論 我暫時沒想到開發(fā)中的...
-
33. `css tracker`面板查看未使用的css
面板查看未使用的css 補充 這個其實用處不大，因為很多css資源是共享的但是 em..... 它真的可以發(fā)現(xiàn)某個項目有多爛,順便推薦一個原子化...
-
34. 通過服務(wù)器增加 Server-Timing 響應(yīng)頭展示時間信息
nodejs 示例代碼 補充 后臺這里應(yīng)該有對應(yīng)的中間件實現(xiàn),有興趣的老鐵可以自行搜索下
-
35. Network 查看實際訪問的IP通過自定義顯示列的方式,可以看到域名解析后的IP地址 快速找到CDN(這個我沒找到 Chrome 89)
-
32. lighthouse 面板檢查網(wǎng)頁狀態(tài)
補充 多維度給網(wǎng)頁打分的工具,把里面的問題都修復了,網(wǎng)頁絕對棒棒噠。我們可以根據(jù)生成的報告，有針對性的修復頁面問題
-
36. 自定義時間測量API
Performance 面板就是以前的timeline面板。用于可視化分析代碼性能。js提供了對應(yīng)的API用于分析https://develop...
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1881139527',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://upload.jianshu.io/collections/images/1943765/%E4%B8%8B%E8%BD%BD.jpg', '推薦專題《Chrome DevTools 小貼士》（ 分享自 @簡書 ）','http://www.itdecent.cn/c/d2286398864f?utm_campaign=maleskine&utm_content=collection&utm_medium=reader_share&utm_source=weibo','頁面編碼gb2312|utf-8默認gb2312'));){kind=link}