如何通過 Chrome 瀏覽器 “開發者工具” 查看 頁面層級分布(Layers 工具)


           剛才在閱讀《瀏覽器工作原理和實踐》第六章------HTML、CSS和JavaScript 是如何呈現頁面的。這一章節時。文中提到通過“你可以打開 Chrome 的“開發者工具”,選擇“Layers”標簽,就可以可視化頁面的分層情況”,如下圖:

           

 

於是也想打開chrome中的Layer查看圖層,奈何找了半天沒找到,經過一番百度,終於找到了。廢話不多說,開始:

 1、在chrome中任意位置右鍵點擊 ,如下圖中的選項(如果是中文版的就是‘檢查’這個選項):

 

2、進入到chrome開發者工具,見圖:

 

3、進入Layer頁面,操作按鈕從左至右功能依次為:平移、旋轉、復位。見圖:

 

 

 

END

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM