Firefox Developer Edition:檢查元素
2015/07/13
萌芽站長
806 0
軟體應用 , 瀏覽器 , Firefox
「Firefox Developer Edition」檢查元素是非常棒的開發者工具,如果你本身有在編寫網頁,甚至有編寫RWD網站,這個工具將大大提升你的產能!現在來大略看一下有什麼功能吧!
▲使用「Firefox Developer Edition」打開要開發的網頁,點滑鼠右鍵,選「檢查元素」。
▲檢查元素出現啦!這就是所謂的「開發者工具」。右上方有一個紅色箭頭,點那可以將「檢查元素」放到瀏覽器右邊,另一個黃色箭頭則是讓「檢查元素」使用視窗開啟。
▲我習慣把「檢查元素」放到右邊,這樣剛好可以直接編寫RWD網頁。
▲當然「Firefox Developer Edition」很熱心的提供適應性設計模式。
▲這樣可以更清楚該設計支援螢幕大小到多少。
▲在「檢查元素」點選HTML元素,可以在左邊網頁顯示畫面中看到位置及其大小。
▲當然「檢查元素」右邊的「規則」也會顯示相對應的CSS原始碼。
▲這樣的介面看起來超專業的,我也很喜歡!稍微說明一下,右邊的規則區是測試CSS很好的地方,可以多多利用,因為現在是以手機版狀態顯示,所以規則區內的CSS當然也是顯示手機版所執行的CSS原始碼,有看到「@Screen」?那就是RWD的使用!
贊助廣告 ‧ Sponsor advertisements
PhotoImpact:製作配合長寬之模糊邊緣遮罩影像
📆 2020-01-28
📁
軟體應用, 多媒體, 靜圖處理
SD web UI:啟用「SD 模型 VAE」頁面頂部下拉選單
📆 2023-08-23
📁
軟體應用, 人工智慧, AI繪圖
Telegram 5.14 for Android & Telegram Desktop 1.9.7 更新:投票 2.0(非匿名投票、複選投票、測驗模...
📆 2020-01-23
📁
軟體應用, 行動平台, 資訊新聞, APP應用, Android
Cruiser:在電腦安裝&瀏覽 MOI.OSM - Taiwan TOPO (by Rudy) 登山地圖
📆 2018-07-07
📁
軟體介紹, 軟體應用, GIS/GPS, 世界地理
Stable Diffusion web UI:AI 繪圖不要一堆的反向提詞(Negative prompt)!
📆 2023-02-18
📁
軟體應用, 人工智慧, AI繪圖
Stable Diffusion web UI x Cyberpunk Anime Diffusion:本機 AI 生成 Cyberpunk 動漫角色
📆 2022-11-29
📁
軟體應用, 人工智慧, AI繪圖
KMPlayer半透明設定
📆 2014-04-27
📁
軟體應用
Telegram Desktop 1.4 更新:重新設計的設定介面、改善圖像的本地緩存
📆 2018-09-29
📁
軟體應用, 資訊新聞
留言區 / Comments
萌芽論壇