OperaのDragonflyで簡単デバック - ホームページ・Web制作全般 - 専門家プロファイル

竹波 哲司
株式会社バンブーウエイブ 代表取締役
Webプロデューサー

注目の専門家コラムランキングRSS

対象:ホームページ・Web制作

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

OperaのDragonflyで簡単デバック

- good

  1. 法人・ビジネス
  2. ホームページ・Web制作
  3. ホームページ・Web制作全般
Webサイトについて Webサイトの制作について
OperaブラウザにはDragonFlyという開発者向けのデバックツールが搭載されています。

使い方は、まずは最新のOperaにアップグレーとしておいて、
ツール-詳細ツール-開発者ツール と選択して、ツールをOnするだけ。

ブラウザの下の部分にデバックコンソールが表示されます。

何が便利?


では、このツールでは何が出来るのでしょうか?

・DOMタブにて、htmlのソースをDOMの形式で表示できる。
・タグをたたむことが出来る。

・クリックで要素を選ぶとしておくことで、ブラウザ上で選択したところの要素がDOMタブに表示される。

・選んだオブジェクトに適用されているスタイルがわかる。
・選んだオブジェクトのプロパティが見れる。
・選んだオブジェクトのレイアウトを見れる。

などなど


Joomla!などCMSのテンプレート作成に有効


このデバックツールを使うことで、Joomla!などのCMSの動的表示された画面のレイアウトをデバックすることが容易になりました。

とくにJoomla!の場合、フリーのエクステンションなどをインストールして使うとなると、そのエクステンションがどのような
タグ構造で表示するかわかりません。
このエクステンションの見た目を多少でも修正したい場合は、cssに該当箇所のdivクラスなどを追加して行くことになります。

こういった作業の際に、Doragonflyはとても有効です。