高雄前端社群24 - 好的瀏覽器開發工具帶你上天堂
tags: f2e
CHROME Dev Tools(洧杰)
Element
- color
- Scroll
- listeners
- Event
- transition
- Animation
Color
- 範例
- 吸色器
-
-
Scroll
- 範例
- ctrl+f (可使用selector寫法)
- 右鍵 -> scroll into view
Listener
- 範例
- 右鍵 -> Show function Definition
-
偽元素
- 範例
- :hov可以看hover樣式
-
Transition
Network
- No throttling
-
-
Chrome Extenstion
- Wappalyzer
- Dimensions
- Type Sample
- JQuery Cheat Sheet
Wappalyzer
- 安裝
- 分析網站使用哪些技術
-
Dimensions
- 安裝
- 量網頁尺寸的工具
-
Type Sample
- 安裝
- 分析網站使用哪個字型
-
JQuery Cheat Sheet
- 網址
- 快速查詢jquery用法
進階實戰功能介紹（富棋）
Network
- Preserver log
- 保留之前紀錄
Sources
- Snippet
- Format
Snippet
- 可以儲存一些常用function的地方
- 右鍵 -> Run
-
Format
- 一鍵美化 點擊下方{} 進行format
-
Dev tool 內建小幫手
- $0~$4
- inspect
- $$
- dir
- console.time
$0~$4
- 選取到的element
-
-
inspect
- 從console跳到element並選取element
inspect($0)
$$
- 頁面未加入jquery可使用$$
dir
- 印出物件的屬性
-
var arr = [1,2,3];
dir(arr)
console.time
- 計算執行時間間隔
-
高雄前端社群24 - 好的瀏覽器開發工具帶你上天堂 tags: f2e
{"metaMigratedAt":"2023-06-14T11:43:21.324Z","metaMigratedFrom":"Content","title":"高雄前端社群24 - 好的瀏覽器開發工具帶你上天堂","breaks":true,"contributors":"[{\"id\":\"e23ef62f-a089-4a28-8ce7-817212441f68\",\"add\":20,\"del\":0}]"}