ExpertとChromium-Extensions-Japan管理人を担当している,太田と申します。Chromeのデベロッパーツールについて紹介します。昨今のJavaScript,HTML,CSSブームの背景には,開発環境,特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面,高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。完全版:ブラウザとデバッグ環境にて各ブラウザの開発環境について紹介しています。各ブラウザそれぞれの開発環境が用意されているので,あわせてチェックしてみてください。WebKit版FirebugのWebInspectorHTML/CSS/JavaScriptのデバッグツールといえば,Firebugが草分けでありデファクトスタンダードと言っても過言ではないでしょう。そんなFirebugを意識して作られたのがWebKitのWebInspectorです。DOMビューア程度の機能しかありませんでしたが,現在ではJavaScriptデバッガのDroseraなどと統合され,Firebugにも勝るとも劣らない機能を備えた統合デバッグ環境へと成長しています。ChromeではそのWebInspectorにデベロッパーツールという名前が付けられており,デフォルトで利用することができるようになっています。デベロッパーツールの起動まずはデベロッパーツールの起動方法です。デベロッパーツールは基本的にタブに対して1つのコンソールが付属する形になっていますので,まずデバッグしたいページをタブで開きます。6では右上のレンチアイコンから[ツール⁠]⁠→[⁠デベロッパーツール]を選択してください。ページ内の適当な箇所で右クリックをすると,コンテキストメニューの一番下に「要素を検証」という項目があるはずです。その項目を選択してもデベロッパーツールが起動し,さらにマウスの下にある要素がハイライトされます(ただし,起動時はハイライトに失敗することがあるようです。起動してから再度「要素を検証」を選択すると確実にハイライトできると思います⁠)⁠。「デベロッパーツール」ではなく「JavaScriptコンソール」を選択しても同じくデベロッパーツールがコンソールタブが開いた状態で起動します。option+command+j(JavaScriptコンソール)で起動することができます。次の画像は右クリックからタイトルについて「要素を検証」してみたところです。要素の検証このように,デベロッパーツールはウィンドウの下に表示されます。デベロッパーツールのパネルこの部分がデベロッパーツール内のタブであり,以下に示すそれぞれのパネルに切り替えることができます。localStorageの確認・編集)Timelineパネル(レンダリングを含めたパフォーマンスチェック)Auditsパネル(YSlowのようなパフォーマンスチェックツール)Consoleパネル(JavaScriptのコマンドラインツール)またその右にあるのは検索ボックスで,ソースコード等からキーワードで検索を行うことができます。デベロッパーツールを別ウィンドウに切り離すことができます。コンソールの表示非表示を切り替えます。一度クリックするとマウスが要素選択モードになり,ページ側の要素をクリックしたときにその要素がハイライトされるようになります(一度ページ側をクリックするとそのモードは解除されます⁠)⁠。コンソールを表示した場合は次のようになります。コンソールの表示コンソールの機能については後述します。Elementsパネルの使い方では,Elementsパネルの使い方から見ていきましょう。HTMLツリービューまずは先程から登場しているHTMLツリービューです。HTMLツリービューではHTMLの構造を表示できるだけでなく,その場で編集することも可能です。Node⁠)⁠」などの操作を行うことができます(Chrome本体の開発状況により,日本語化されている場合とされていない場合があります。以降では日本語化されていない状態の画面で説明しています⁠)⁠。HTML」を選択すると,次のようにその場で編集して,その場でその変更を確認することができます。この編集はEnter(return)キーなどで確定されるまで実際の画面には反映されません。デベロッパーツール著者プロフィール太田昌吾(おおたしょうご,ハンドルネーム:os0x)1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。Expertとして活動を開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。