
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デバッガ
- 新着記事
- 特集
- ブログ
- 企画特集
-
ゼロトラストに不可欠なID管理
-
デジタルを当たり前と言えるか?
-
話題のセキュリティ事故体験ゲーム
-
さあ、クラウドで解決しよう。
-
漫画で解説!運用管理のコツ
-
連載!プロが語るストレージ戦略
-
DXができない企業が滅びる理由
-
講演の見どころを紹介
-
幸せ?不幸?ひとり情シス座談会
-
Kubernetesの認定制度が開始
-
明日からではもう遅い?!
-
ビッグデータ最前線!
-
中小企業でのひとり情シスIT運用術
-
連載!プロが語るストレージ戦略
-
企業DXのキモはクラウドにあり
-
利便性とセキュリティの両立
-
いままさに社会にとっての転換点
-
特集:IT最適化への道
-
連載!プロが語るストレージ戦略
-
セキュリティの今を知る
-
内部不正や不注意をどう防ぐ?
-
モバイルデバイスもターゲットに!
-
次の一手はこれだ!
-
常識を疑え!
-
現場主導の業務変革のポイント