偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

你可能不知道的 Chrome Devtools 實(shí)用功能

系統(tǒng) 瀏覽器
當(dāng)我們刷新完頁面之后,通??刂婆_的Console面板就會被清空。如果想保留控制臺的日志,就可以在設(shè)置中勾選Preserve log選項(xiàng)以保留控制臺中的日志。

今天來分享 10 個 Chrome DevTools 實(shí)用調(diào)試功能!

1. 保留日志

當(dāng)我們刷新完頁面之后,通??刂婆_的Console面板就會被清空。如果想保留控制臺的日志,就可以在設(shè)置中勾選Preserve log選項(xiàng)以保留控制臺中的日志。

2. 代碼覆蓋率

我們可以打開設(shè)置,在Experiments中勾選Record coverage while performance tracing選項(xiàng)。

在面板下方的Coverage面板中點(diǎn)擊紅色按鈕以記錄頁面的代碼覆蓋率:

代碼覆蓋率使用動態(tài)分析法來收集代碼運(yùn)行時的覆蓋率,讓開發(fā)者知道有代碼在頁面上真正的使用。動態(tài)分析是指在應(yīng)用運(yùn)行狀態(tài)下收集代碼執(zhí)行數(shù)據(jù)的過程,換句話說,覆蓋率數(shù)據(jù)就是在代碼執(zhí)行過程中通過標(biāo)記收集到的。

3. 顯示重繪

在瀏覽器的開發(fā)者工具中可以通過開啟顯示重繪選項(xiàng)以查看頁面在執(zhí)行操作時哪些元素會發(fā)生重繪。

在控制臺右上角三個點(diǎn)中的 More tools 選項(xiàng)中開啟 Rendering 選項(xiàng)卡:

在 Rendering(渲染)選項(xiàng)卡中開啟 Paint flashing:

當(dāng)刷新頁面時,顯示綠色的區(qū)域就是重新繪制區(qū)域。

4. 檢查動畫

Chrome 的開發(fā)者工具不僅可以調(diào)試樣式,還可以調(diào)試動畫,可以在控制臺右上角三個點(diǎn)中的 More tools 選項(xiàng)中開啟 Animations 選項(xiàng)卡:

當(dāng)頁面的動畫執(zhí)行時,就會在時間軌道上查看所有的動畫,點(diǎn)擊其中一個動畫可以懂得執(zhí)行過程以及時間軸:

我們可以在時間軸上定位到任一時刻的動畫幀,也可以拖動左右兩端的圓點(diǎn)來修改動畫的延遲和周期,修改之后可以在屬性面板看到對應(yīng)的 CSS 樣式。

5. 截圖

Chrome瀏覽器內(nèi)置了截圖功能,可以在瀏覽器開發(fā)者工具中使用 Ctrl+Shift+P(Windows)或者Command+Shift+P(Mac)快捷鍵打開搜索來查找screenshot:

這里有四個選項(xiàng):

  • 第一個:截取自選區(qū)域;
  • 第二個:截取整個網(wǎng)頁;
  • 第三個:截取當(dāng)前節(jié)點(diǎn);
  • 第四個:截取當(dāng)前屏幕。

截圖完成后自動下載到下載目錄,打開瀏覽器的下載框或本機(jī)的下載目錄即可看到圖片。

6. Local Overrides

我們可以使用本地資源覆蓋網(wǎng)頁所使用的資源,比如可以使用本地 CSS 文件覆蓋網(wǎng)頁的css文件,修改樣式。將本地的文件夾映射到網(wǎng)絡(luò),在Chrome開發(fā)者功能里面對CSS樣式的修改都會直接改動本地文件,頁面重新加載,使用的資源也是本地資源,達(dá)到持久化的效果。

詳見:https://developer.chrome.com/blog/new-in-devtools-65/#overrides

7. 全局搜索代碼

Chrome瀏覽器為我們提供了全局搜索的概念,可以點(diǎn)擊開發(fā)者工具右上角的三個點(diǎn),點(diǎn)擊Search選項(xiàng),在Search面板中搜索所需關(guān)鍵字即可,點(diǎn)擊搜索結(jié)果即可跳到對應(yīng)文件的代碼行:

8. 事件監(jiān)聽器的斷點(diǎn)

有時應(yīng)用會在用戶發(fā)生交互時出現(xiàn)問題,這時我們就可以添加事件監(jiān)聽器添加斷點(diǎn)來捕獲這些事件以檢查交互時的問題??梢栽赟ource面板右側(cè)的Event Listener Breakpoints中勾選相應(yīng)的事件:

9. DOM 操作的斷點(diǎn)

當(dāng)頁面的內(nèi)容發(fā)生變化時,如果想要知道是哪些腳本影響了它,就可以給DOM設(shè)置斷點(diǎn)。我們可以右鍵點(diǎn)擊需要設(shè)置斷點(diǎn)的DOM元素,在彈出的菜單中點(diǎn)擊Break on以選擇合適的斷點(diǎn)。

可以看到,Break on中有三個選項(xiàng):

  • Subtree Modifications:子節(jié)點(diǎn)(內(nèi)容、屬性)修改通知,常用在子節(jié)點(diǎn)內(nèi)容發(fā)生變化后,來定位源碼;
  • Attributes Modifications:當(dāng)前節(jié)點(diǎn)的屬性修改通知,常用在節(jié)點(diǎn)的 className 等屬性被修改后,來定位源碼了;
  • Node Removal:當(dāng)前節(jié)點(diǎn)移動時通知,常用在節(jié)點(diǎn)被移除時,定位源碼。

10. 異步請求的斷點(diǎn)

XHR breakpoints 可以用于異步請求的斷點(diǎn),點(diǎn)擊加號即可添加斷點(diǎn)規(guī)則,輸入請求 的 URL 地址(片段),會在請求地址包含對應(yīng)字符串的異步請求發(fā)出的位置自動停止:

責(zé)任編輯:武曉燕 來源: 前端充電寶
相關(guān)推薦

2021-12-17 00:10:00

ChromeDevtools功能

2017-04-11 14:12:07

Snippets工具JavaScript

2022-09-20 11:58:27

NpmNode.js

2012-11-23 10:57:44

Shell

2023-02-27 09:20:24

絕對定位CSS

2023-01-29 09:46:47

Dialog彈窗模態(tài)

2015-08-13 09:03:14

調(diào)試技巧

2020-01-29 19:40:36

Python美好,一直在身邊Line

2021-01-05 11:22:58

Python字符串代碼

2019-11-20 10:25:06

sudoLinux

2022-04-30 19:22:35

Python編程語言

2020-06-22 08:09:22

GitHub工具開發(fā)

2021-07-12 07:59:06

安全 HTML 屬性

2019-11-25 14:05:47

Python裝飾器數(shù)據(jù)

2014-12-08 10:39:15

2020-03-05 11:10:18

Left join數(shù)據(jù)庫MySQL

2018-05-10 11:50:13

Docker容器冷知識

2024-03-04 00:00:00

Kubernetes技巧API

2010-07-29 09:18:31

Linux用戶

2016-09-05 13:14:11

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號