CSS

chrome-dev-you-may-dont-know

Google+ Pinterest LinkedIn Tumblr

在控制檯中使用 shift-enter(連續多行輸入執行)

———————————————–(華麗的分割線)

在元素面板中拖拽元素

在元素面板中我們是可以拖拽任意元素到頁面中其他位置的(這個大家應該都知道。。。)

chrome-dev-you-may-dont-know

控制檯中引用元素面板中選中的元素

在元素面板中選中元素,然後就可以在控制檯中使用 $0 引用它,神奇了

chrome-dev-you-may-dont-know

大吃一驚還有這等操作(管用)

在控制檯中使用上次操作的結果

在控制檯中輸入 $_ 引用上次操作結果

chrome-dev-you-may-dont-know

他要$?就更神奇了(管用)

修改元素的狀態以及新增 css

這個大家都知道,直接截圖就好了

chrome-dev-you-may-dont-know

在看下一個

chrome-dev-you-may-dont-know

查詢 css 屬性定義的位置

使用 cmd-click(ctrl-click on windows) 組合點選一個元素面板中的 css 屬性就會跳轉到 Source panel 中(連續兩連點選纔可以哦)

chrome-dev-you-may-dont-know

不錯不錯(管用)

將修改的 css 樣式儲存到檔案

在元素面板右側修改樣式,然後使用上面方法跳 source panel 中,就會看到 css 原始檔,右擊檔名字,save as 儲存到本地

chrome-dev-you-may-dont-know

對單個元素的截圖

選中一個元素然後按組合鍵 cmd-shift-p(or crtl-shift-p on windows)開啟命令選單(command menu), 接著輸入 screenshot 選擇 Capture node screenshot

chrome-dev-you-may-dont-know

有意思的功能, 可惜我試驗失敗了。。。(66.0.3359.139chrome 版本,大家可以試試),其實裏面的 screenshot 還有另外兩個 capture full siz screenshot(全截,我也失敗了), capture screenshot 接的是當文件展示的區域我成功了

在控制檯中使用 shift-enter 連續多行輸入執行

多行輸入執行,啥也不說了,有用(管用)

chrome-dev-you-may-dont-know

每次換行使用 shit+enter 哦

清理控制檯

清理使用 ctrl-l or cmd-k(管用)

跳轉…

在 source panel 中

  • cmd-o(ctrl-o on windows) 展示當前頁面載入的所有檔案
  • cmd-shift-o(ctrl-shift-o in windows) 展示當前檔案的符號表(屬性,函式以及類)

  • ctrl-g 調到當前檔案的指定行

chrome-dev-you-may-dont-know

親測管用

監聽表示式

新增一個表示式到 debug session 中,不用手動計算了

chrome-dev-you-may-dont-know

管用, 在 source panel 中,若是沒有 consle 面板,右鍵-> evaluate in console 即可

XHR/FETCH 除錯

可以在 source panel 中的右側看到 XHR/FETCH breakpoints 中新增斷點,不知道請 ajax 啥時候發的,沒問題,他可以幫你。。。

chrome-dev-you-may-dont-know

並且我還在下面發現了 Event Listener Breakpoint,而它可以帶來的斷點位置是在是太多了,比如: 動畫(animation), Canvas, Clipboard, DOM Mutaion, keyboard, 哎呀太多了,大家可以親自試一試

DOM 修改的除錯

右鍵選中的元素,選擇 break on 展開後會有 subtree modifications, 就是說如果有指令碼修改了子元素,斷點就會觸發,還有 atrribute modification, 以及 node removal

chrome-dev-you-may-dont-know

文章尾部福利贈送

cmd-shfit-p 開啟的命令列裏面的有用命令(還有更多的等待大家一起探索)

  1. show layers 檢視當前頁面的渲染情況,合成層( 關於合成層看淘寶 )的狀況,繪製的具體範圍,等等檢查效能一絕
  2. show perfomance monitor 顧名思義
  3. show frame per second(FPS) meter 顧名思義
  4. show paint flashing rectangles 展示當前頁面重繪的區域

Write A Comment