SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マンガで分かるプログラミング用語辞典

「Webブラウザの開発ツール」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(129)

解説

 Webブラウザの「開発者ツール」(Developer Tools/DevTools)は、Webサイトの構築やWebページの作成に役立つ、Webブラウザの機能です。主要なWebブラウザには、この開発者ツールが付いています。Windowsでは「F12」キー、Macでは「Command+Option+I」などのショートカットで呼び出せることが多いです。

 主要なWebブラウザが備えている「開発者ツール」の機能は似通っています。例えば「Google Chrome」では、DOM要素ツリーを表示するタブや、コンソールの内容を表示するタブがあります。他にも、読み込んだファイルを確認するタブや、ネットワークの情報、メモリやCPUなどの情報を確認するタブが用意されています。

サンプル

 開発者ツールのコンソールに情報を表示するJavaScriptのプログラムを掲載します。

 ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。

<html>
    <head>
        <title>「コンソール」のサンプル</title>
        <meta charset="UTF-8">
        <script>
            console.log('コンソールに情報を出力');
            console.log(window.location);
        </script>
    </head>
    <body>
        開発者ツールを開き「コンソール(Console)」タブを確認してください。
    </body>
</html>
実行結果
実行結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10608 2018/03/20 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー