Day16 使用小工具Debug DevTools - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 16

0

Modern Web

切版與CSS：打造工具箱與切版施工流程！系列第 16 篇

Day16 使用小工具Debug DevTools

15th鐵人賽 devtools css

團隊好想工作室 v7.0

2023-10-01 16:10:25

391 瀏覽

分享至

Imgur

當我正疑惑要不要寫篇時，想說這大家都應該都知道吧？但回想小白白如我，還真的不知道這玩意。以下分享是跟切版比較有關係，做個簡單介紹，細節的話可能夠出一個鐵人系列了，等我在積累個三年使用心得吧ＱＡＱ～
DevTools的功能強大，值得我們細細品嚐。

起手式

首先到任一瀏覽器頁面滑鼠按右鍵，你就有看到『檢查』或者『開發者工具』之類的，給他點下去，或使用快捷鍵。接下來就會發現來到網頁工程世界了！我目前常用是的Chrom，這裡就以此為例來做個簡單的分享。

Windows 和 Linux

開啟「開發人員工具」 | Ctrl + Shift + J 鍵或 F12 鍵

Mac

開啟「開發人員工具」 | ⌘ + Option + I 鍵 或者Command + SHIFT + C 。

就會出現這個畫面：

檢查HTML 結構ＤＯＭ

當選取到<html dir="ltr" lang="zh" class="focus-outline-visible" lazy-loaded="true">意有所指就是整個頁面啊。
點選右鍵，就會有超多功能，可以直接做編輯！超酷！
這裡的HTML跟你寫在VScode裡的會不太一樣喔～
可以找到Shadow DOM 這通常會出現在輸入框，而在此面的找到class是更改框內部元素的重點。

選取元素的style

左側條，可見style與權重與繼承狀態，被誰影響了？
右側，區塊的盒模型狀態

偽類狀態

點選第二排的『：hov』會出現，強制使用元素狀態，這裡勾選，你就可以見查到狀態了～

ＲＷＤ檢視

關於ＲＷＤ另外文章會提及，可參考未來幾天的上架：）

顏色吸取

剛開始都是截圖丟線上服務解析顏色，也有人有用繪圖工具來做吸取顏色，顏色之於前端實在重要，有時一條線就三種類似的顏色，透過吸取才知道(當然你有專業設計稿，設計師會提供給你)，原來不同色！這還有更多功能，就等你探索啦！

閱讀更多

你所不知道的各種前端 Debug 技巧系列
 Google Developers

Day15 CSS Display 屬性探勘摘要

Day17 CSS命名，名字取好沒煩惱？

系列文

切版與CSS：打造工具箱與切版施工流程！共 30 篇

目錄

RSS系列文訂閱系列文

12 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22203 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙