序章

最新のブラウザには、JavaScriptやその他のWebテクノロジと連携するための開発ツールが組み込まれています。 これらのツールには、シェルインターフェイスに似たコンソールと、DOMを検査し、デバッグし、ネットワークアクティビティを分析するためのツールが含まれています。

コンソールを使用して、JavaScript開発プロセスの一部として情報をログに記録したり、ページのコンテキスト内でJavaScript式を実行してWebページを操作したりできます。 基本的に、コンソールは、JavaScriptをオンデマンドで作成、管理、および監視する機能を提供します。

このチュートリアルでは、ブラウザーのコンテキスト内でコンソールとJavaScriptを操作する方法について説明し、Web開発プロセスの一部として使用できるその他の組み込み開発ツールの概要を示します。

注:このチュートリアルを続けると、ブラウザとコンソールが画像の例とは異なって見えることに気付くかもしれません。 ブラウザは頻繁に更新され、多くの場合、新しいツールと、場合によっては新しい視覚スタイルが含まれています。 これらの更新は、ブラウザでコンソールを使用する機能に影響を与えることはありません。

ブラウザでのコンソールの操作

標準ベースのHTMLおよびXHTMLをサポートする最新のWebブラウザーのほとんどは、ターミナルシェルと同様のインターフェイスでJavaScriptを操作できる開発者コンソールへのアクセスを提供します。 このセクションでは、FirefoxとChromeでコンソールにアクセスする方法の概要を説明します。

Firefox

FireFoxでWebコンソールを開くには、右上隅のアドレスバーの横にあるメニューに移動します。

その他のツールを選択します。 それを開いた状態で、Web開発ツールアイテムをクリックします。

これを行うと、ブラウザウィンドウの下部にトレイが開きます。

キーボードショートカットを使用してWebコンソールに入ることができます CTRL + SHIFT + K LinuxおよびWindowsの場合、または COMMAND + OPTION + K macOSで。

コンソールにアクセスしたので、JavaScriptでコンソール内で作業を開始できます。

クロム

ChromeでJavaScriptConsole を開くには、ブラウザウィンドウの右上にある3つの縦の点で示されるメニューに移動します。 そこから、その他のツール開発者ツールの順に選択できます。

これにより、上部のメニューバーにあるコンソールをクリックして、JavaScriptコンソールがまだ強調表示されていない場合に表示できるパネルが開きます。

キーボードショートカットを使用してJavaScriptコンソールに入ることができます CTRL + SHIFT + J LinuxまたはWindowsの場合、または COMMAND + OPTION + J macOSでは、すぐにコンソールにフォーカスが移動します。

コンソールにアクセスしたので、JavaScriptでコンソール内で作業を開始できます。

コンソールでの作業

コンソール内で、JavaScriptコードを入力して実行できます。

文字列を出力するアラートから開始します Hello, World!:

  1. alert("Hello, World!");

を押すと ENTER JavaScriptの行に続くキーを押すと、ブラウザにアラートポップアップが表示されます。

コンソールは、式を評価した結果も出力することに注意してください。 undefined 式が明示的に何かを返さない場合。

クリックアウトする必要のあるポップアップアラートを表示するのではなく、JavaScriptをコンソールに記録してJavaScriptを操作できます。 console.log.

印刷するには Hello, World! 文字列、コンソールに次のように入力します。

  1. console.log("Hello, World!");

コンソール内に、次の出力が表示されます。

Output
Hello, World!

コンソールで数学を実行することもできます。

  1. console.log(2 + 6);
Output
8

さらに複雑な計算を試すこともできます。

  1. console.log(34348.2342343403285953845 * 4310.23409128534);
Output
148048930.17230788

さらに、変数を使用して複数の行で作業できます。

  1. let today = new Date();
  2. console.log("Today's date is " + today);
Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

コンソールを介して渡したコマンドを変更する必要がある場合は、キーボードで上矢印()キーを入力して、前のコマンドを取得できます。 これにより、コマンドを編集して再送信できます。

JavaScriptコンソールは、ターミナルシェルインターフェイスに似た環境を使用できるようにすることで、JavaScriptコードをリアルタイムで試すためのスペースを提供します。

HTMLファイルの操作

コンソールでHTMLファイルまたは動的にレンダリングされたページのコンテキスト内で作業できます。 これにより、既存のHTML、CSS、およびJavaScriptのコンテキスト内でJavaScriptコードを試すことができます。

コンソール内でページを変更した後、ページをリロードするとすぐに、ドキュメントを変更する前の状態に戻ることに注意してください。 他の場所に保持したい変更は必ず保存してください。

次のようなHTMLドキュメントを取得します index.html ファイル、コンソールを使用して変更する方法を理解します。 お気に入りのテキストエディタで、 index.html ファイルを作成し、次のHTML行を追加します。

index.html
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

上記のHTMLファイルを保存して、選択したブラウザにロードすると、タイトルが「 Today's Date ブラウザでレンダリングされます。

コンソールを開き、JavaScriptを使用してページを変更します。 JavaScriptを使用してHTMLに見出しを挿入することから始めます。

  1. let today = new Date();
  2. document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

コンソールに次の出力が表示されます。

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

ページは次のようになります。

背景色など、ページのスタイルを変更できます。

  1. document.body.style.backgroundColor = "lightblue";
Output
"lightblue"

ページ上のテキストの色と同様に:

  1. document.body.style.color = "white";
Output
"white"

これで、ページに次のようなものが表示されます。

ここから、を作成できます <p> 段落要素:

  1. let p = document.createElement("P");

この要素を作成したら、次に、段落に追加できるテキストノードを作成できます。

  1. let t = document.createTextNode("Paragraph text.");

テキストノードを変数に追加して追加します p:

  1. p.appendChild(t);

そして最後に追加 p その段落で <p> 要素とドキュメントに追加されたテキストノード:

  1. document.body.appendChild(p);

これらの手順を完了すると、HTMLページが表示されます index.html 次の要素が含まれます。

コンソールには、HTMLページの変更を試すためのスペースがありますが、コンソールで作業を行うときは、HTMLドキュメント自体を変更しないことに注意してください。 ページをリロードすると、空白のドキュメントに戻ります。

他の開発ツールを理解する

使用するブラウザの開発ツールに応じて、他のツールを使用してWeb開発ワークフローを支援することができます。

DOM —ドキュメントオブジェクトモデル

Webページが読み込まれるたびに、そのWebページが存在するブラウザは、 D ocument O bject M odel、またはDOMのオブジェクトを作成します。ページ。

DOMはオブジェクトのツリーであり、階層ビュー内にHTML要素を表示します。 DOMツリーは、FirefoxのInspectorパネルまたはChromeのElementsパネルで表示できます。

これらのツールを使用すると、DOM要素を検査および編集したり、特定のページのアスペクトに関連するHTMLを識別したりすることができます。 DOMは、テキストスニペットまたは画像にID属性があるかどうかを通知し、その属性の値を判別するのに役立ちます。

上で変更したページには、ページをリロードする前に、次のようなDOMビューがあります。

さらに、サイドパネルまたはDOMパネルの下にCSSスタイルが表示され、HTMLドキュメント内またはCSSスタイルシートを介してどのスタイルが採用されているかを確認できます。 たとえば、FirefoxInspectorにサンプルページの本文スタイルが含まれていることに注意してください。

DOMノードをライブ編集するには、選択した要素をダブルクリックして変更を加えます。 たとえば、 <h1> タグを付けて <h2> 鬼ごっこ。

コンソールと同様に、ページをリロードすると、HTMLドキュメントの元の保存状態に戻ります。

通信網

ブラウザの組み込み開発ツールのネットワークタブは、ネットワーク要求を監視および記録できます。 このタブには、ブラウザがページをロードするタイミング、各リクエストにかかる時間など、ブラウザが行うネットワークリクエストが表示され、これらの各リクエストの詳細が表示されます。 これは、ページの読み込みパフォーマンスを最適化し、要求の問題をデバッグするために使用できます。

JavaScriptコンソールと一緒に[ネットワーク]タブを使用できます。 つまり、コンソールでページのデバッグを開始してから、[ネットワーク]タブに切り替えて、ページをリロードせずにネットワークアクティビティを確認できます。

[ネットワーク]タブの使用方法の詳細については、Firefoxのネットワークモニターの操作またはChromeのDevToolsを使用したネットワークパフォーマンスの分析の開始について読むことができます。

レスポンシブデザイン

Webサイトが応答する場合、携帯電話、タブレット、デスクトップ、ラップトップなど、さまざまなデバイスで適切に表示および機能するように設計および開発されています。 画面サイズ、ピクセル密度、サポートタッチは、デバイス間で開発する際に考慮すべき要素です。 Web開発者は、レスポンシブデザインの原則を念頭に置いて、アクセスできるデバイスに関係なく、ユーザーがWebサイトを完全に利用できるようにすることが重要です。

FirefoxとChromeはどちらも、Web用のサイトやアプリを作成および開発するときに、レスポンシブデザインの原則に注意を払うためのモードを提供します。 これらのモードは、開発プロセスの一部として調査および分析できるさまざまなデバイスをエミュレートします。

FirefoxのレスポンシブデザインモードまたはChromeのデバイスモードの詳細を読んで、これらのツールを活用してWebテクノロジーへのより公平なアクセスを確保する方法を確認してください。

結論

このチュートリアルでは、最新のWebブラウザー内でのJavaScriptコンソールの操作の概要と、ワークフローで使用できる他の開発ツールに関する情報を提供しました。

JavaScriptの詳細については、データ型、またはjQueryまたはD3ライブラリについて読むことができます。