新ブログの該当記事に転送中です。少々お待ち下さい。
(転送されない場合は下記リンクからお進み下さい)

『Firefoxに標準搭載されたFirebugのような機能を使ってみる』
https://at.sachi-web.com/blog-entry-795.html

このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

Firefoxに標準搭載されたFirebugのような機能を使ってみる

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

ウェブページの構造やデザインを調べる際は
Firegug というアドオンを使っているのですが
いつの間にか(「10」から?) Firefox に
同じような機能が標準搭載されていたらしい。

ということで今回は、Firefox に標準搭載された
Firebug のようにウェブページを調査する機能について
書いていきたいと思います。



基本操作

調査したいページを開いた状態で
「Ctrl + Shift + I」を押しましょう。
(メニューの「ツール」→「Web開発」→「調査」でも可)

すると、ウェブページの調査機能が立ち上がります。
起動スピードは Firebug よりも断然早いですね。

Firebug と似た部分もあるので
操作方法で困ることはあまりないかもしれませんが
基本操作について見ていきましょう。

バー左側には、要素を選択する際のボタンがあります。
このボタンを押せばページ上にある要素を直接選択できます。
HTMLソースを表示するボタンもあるので
ソースを見たい場合にはオンにしておきましょう。
操作画面

バー右側には、CSS情報を表示するボタンがあります。
選択した要素の CSS を確認したい場合はオンにしましょう。
ウェブページの調査機能を終了する場合は
右端の「x」をクリックすればOKです。
操作画面

「3Dビュー」についての説明は省略します。
どんな機能なのかはボタンを押せばよく分かります。

ちなみに、CSS情報は
ウィンドウ右側にこんな感じで表示されます。
CSS を編集して現在の表示に反映することも可能です。
操作画面



要素の表示に関する設定

初期設定では、
周囲が暗転し選択した要素が強調表示されます。
また、要素の情報に関するフキダシも表示されます。
操作画面

これらの「暗転」「フキダシ」の表示については
バー左側の歯車のボタンから設定を変更できます。
自分が使いやすいように変更しましょう。
操作画面


Firefox に標準搭載されたウェブページの調査機能。
Firebug と比べると機能が簡易的な気はしますが
軽快に起動、動作するというのはよいですね。

ウェブページの構造を軽く調べるくらいなら
こちらでも十分なのではないかと思います。



このエントリーをはてなブックマークに追加




ブログ移転に伴い、コメント受付は終了しました。



記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ