Firefox Developer Edition:檢查元素
2015/07/13
萌芽站長
1,303 1
軟體應用 , 瀏覽器 , Firefox
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
「Firefox Developer Edition」檢查元素是非常棒的開發者工具,如果你本身有在編寫網頁,甚至有編寫RWD網站,這個工具將大大提升你的產能!現在來大略看一下有什麼功能吧!

▲使用「Firefox Developer Edition」打開要開發的網頁,點滑鼠右鍵,選「檢查元素」。

▲檢查元素出現啦!這就是所謂的「開發者工具」。右上方有一個紅色箭頭,點那可以將「檢查元素」放到瀏覽器右邊,另一個黃色箭頭則是讓「檢查元素」使用視窗開啟。

▲我習慣把「檢查元素」放到右邊,這樣剛好可以直接編寫RWD網頁。

▲當然「Firefox Developer Edition」很熱心的提供適應性設計模式。

▲這樣可以更清楚該設計支援螢幕大小到多少。

▲在「檢查元素」點選HTML元素,可以在左邊網頁顯示畫面中看到位置及其大小。

▲當然「檢查元素」右邊的「規則」也會顯示相對應的CSS原始碼。

▲這樣的介面看起來超專業的,我也很喜歡!稍微說明一下,右邊的規則區是測試CSS很好的地方,可以多多利用,因為現在是以手機版狀態顯示,所以規則區內的CSS當然也是顯示手機版所執行的CSS原始碼,有看到「@Screen」?那就是RWD的使用!
贊助廣告 ‧ Sponsor advertisements
Google Chrome擴充功能:WOT
📆 2014-07-17
📁
瀏覽器, Google Chrome, 擴充元件
SD web UI x pen sketch style LoRA:AI 生成素描速寫風格人物
📆 2023-06-10
📁
軟體應用, 人工智慧, AI繪圖
FramePack:開源圖生影 AI 工具,低門檻打造高品質影片的革命性實測
📆 2025-04-24
📁
軟體應用, 人工智慧, AI影片
Movavi Video Converter:多媒體快速轉換、影片穩定優化、添加浮水印、高品質格式轉換
📆 2018-02-08
📁
軟體介紹, 軟體應用, 多媒體, 影片編輯
利用IcoFX抓軟體圖示
📆 2014-04-28
📁
軟體應用
FadBlock:友善的 YouTube 廣告快轉器!讓廣告在一秒內播完!
📆 2023-12-24
📁
軟體應用, 瀏覽器, Google Chrome, Firefox, Edge, 擴充元件
Telegram Desktop 1.5 更新:自定義語言、大螢幕的界面縮放、更新表情符號
📆 2018-12-11
📁
軟體應用, 資訊新聞
Firefox Quantum:火狐量子全新瀏覽器測試版釋出!一般使用者 11/14 自動更新!
📆 2017-10-01
📁
軟體應用, 瀏覽器, 資訊新聞, Firefox
留言區 / Comments
萌芽論壇