近頃のブラウザにはパワフルな開発者ツールが入っています。開発者ツールでは、現在の HTML や CSS、JavaScript の状態を検証したり、ページがどういったアセットにアクセスし、どれだけ時間がかかったかといった多様なことができます。この記事ではブラウザの開発者ツールの使い方について説明します。
注: 下のサンプルを実行していく前に、Web入門の記事の中で作りあげる、初心者向けウェブサイトの例を開いてください。後ほどこれを使って説明します。
開発者ツールはブラウザのサブウィンドウの中にいます。大体こんな感じに...。
どのように開くのでしょうか？これには 3 つの方法があります。
メニュー ➤ Web開発 ➤ 開発者ツールを開く
開発者ツールはたいてい最初にインスペクタが開きます。インスペクタの見た目は下に示すスクリーンショットのような感じです。このツールは実行時/表示時に HTML の状態がどのようになっているか見せてくれます。また、CSS がどのようにページ内の要素に適用されているかも見られます。そして、HTML と CSS をその場で簡単に編集し、ブラウザのビューポートに表示されている結果に反映することができます。
もしインスペクタが表示されていない場合、
まずは、DOM インスペクタ上の HTML の要素を右クリックして、コンテキストメニューを見てみましょう。メニューの表示はブラウザによって異なりますが、重要な機能はほぼ同じです。
それでは表示されている DOM を編集してみましょう。要素をダブルクリックしたり、右クリックして、HTML として編集を選んでみましょう。いろいろと変更してみても問題ありませんが、保存ができませんのでご注意を。
最初は CSS エディターは現在選択中の要素に適用されている CSS ルールを表示しています。
以下の機能は特に便利です。
CSS ビューアーの一番上にいくつかのタブメニューがあることに気づいたでしょうか。
各ブラウザのインスペクタの詳細については以下をご覧ください。
The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:
If the developer tools are already open, click or press the Console tab.
If not, Firefox allows you to open the console directly using Ctrl + Shift + K or using the menu command: Menu ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console. On other browser, open the developer tools and then click the Console tab.
This will give you a window like the following:
To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):
alert('hello!');
document.querySelector('html').style.backgroundColor = 'purple';
var myImage = document.createElement('img');
myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myImage);
Now try entering the following incorrect versions of the code and see what you get.
alert('hello!);
document.cheeseSelector('html').style.backgroundColor = 'purple';
var myImage = document.createElement('img');
myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myImage);
You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!
Find more out about the JavaScript console in different browsers: