
Google Chromeの開発ツールは実務に耐えうる:Firebugなみの性能を発揮
先日ベータ版が公開されたGoogleオリジナルのブラウザ「Google Chrome」。「無駄を削ぎ必要な機能のみを追求した」というのが謳い文句だが、その一方でウェブ開発者向けの機能が充実している点も見逃せないポイントだ。
高機能なJavaScriptコンソール
Google Chromeはウェブ開発者向けの機能として、デフォルトでJavaScriptコンソールとJavaScriptデバッガが付属している。特にJavaScriptコンソールの方は、Firefoxのアドオンとして著名なFirebugに劣らない高機能さであり、実務でも十分に使えそうだ。
ChromeのJavaScriptコンソールおよびJavaScriptデバッガは、[開発/管理]メニューから起動できる(図1)。
図2はZDNet Japanのトップページを表示させた際の、JavaScriptコンソールの表示である。
[Elements]メニューではHTMLのエレメントが階層構造で表示され、[Resources]メニューではリソースの情報が表示される。何らかのエラーが発生している場合には下部のフレームにその情報が表示される。Safariに付属する開発ツールのエラーコンソールとよく似ているが、これはGoogle ChromeがWebKitをベースとしているからだろう。
ソース中のエレメントにマウスカーソルを合わせると、ブラウザに表示されたページ内の該当のコンテンツが強調表示される。図3ではナビゲーションメニューを強調表示させた様子を示す。
エラーに表示されたリンクをクリックすると、Resourcesメニューに移動しソース中の該当箇所とエラーの原因を示してくれる。図4では<a>の閉じタグが余分だと言われているようだ。
Resourceメニューでは、リソースのロードに関するタイムラインを表示することができる(図5)。これを見れば各リソースのロードにかかる時間が一目瞭然であり、ボトルネックの発見に役立つだろう。
どうやらHTMLのデバッグに関しては全く問題なく使えそうである。では次に、JavaScriptデバッガの方を見てみよう。
コマンドベースのJavaScriptデバッガ
- 新着記事
- 特集
- ブログ
- 企画特集
-
講演レポ:ポスト2020時代の基盤
-
下した決断は「ハイブリッドへ」
-
特集:ビジネスを止めるな!
-
働き方改革は身近な「改善」から
-
意識してますか?PCの「信頼性」
-
働き方改革にモニターが有効なワケ
-
変化への対応はリアルタイム経営で
-
2020年代を勝ち抜くインフラ
-
明治創業の鉄道企業がAWSに挑戦
-
レガシーなインフラ設計を見直す
-
RPAがニガテなExcelをどう使う
-
隗より始めよ
-
Office 365にもFWが必要?
-
サブスクモデルのSaaSで業務改善
-
特集:ポスト2020時代のCX再考
-
どこまで可能?企業を究極の自動化
-
AI活用が激変する新たなインフラ
-
クラウドバックアップお悩み相談室
-
実現まで10年「ゼロトラスト」
-
攻めと守りのクラウド活用とは!?
-
ビジネス成功の砦はここにあり!
-
働き方、生産性を根底から底上げ!
-
「脱レガシー」なくしてDXはない
-
ビジネスの大きな転換点で勝者に!
-
新時代にはゼロトラストが不可欠
-
ITシステムは永久のβ版思考で
-
レポート:NWセキュリティの未来
-
分析されたデータを活用できるか?
-
DX成功の鍵はセキュリティにあり
-
ウルトラ帳票文化を乗り越える!
-
データ活用を加速するエコシステム
-
Why ワークプレース?