JavaScript開発者コンソールの使用方法
序章
最新のブラウザには、JavaScriptやその他のWebテクノロジと連携するための開発ツールが組み込まれています。 これらのツールには、シェルインターフェイスに似たコンソールと、DOMを検査し、デバッグし、ネットワークアクティビティを分析するためのツールが含まれています。
コンソールを使用して、JavaScript開発プロセスの一部として情報をログに記録したり、ページのコンテキスト内でJavaScript式を実行してWebページを操作したりできます。 基本的に、コンソールは、JavaScriptをオンデマンドで作成、管理、および監視する機能を提供します。
このチュートリアルでは、ブラウザーのコンテキスト内でJavaScriptでコンソールを操作する方法について説明し、Web開発プロセスの一部として使用できる他の組み込み開発ツールの概要を示します。
ブラウザでのコンソールの操作
標準ベースのHTMLおよびXHTMLをサポートする最新のWebブラウザーのほとんどは、ターミナルシェルと同様のインターフェイスでJavaScriptを操作できる開発者コンソールへのアクセスを提供します。 FirefoxとChromeでコンソールにアクセスする方法について説明します。
Firefox
FireFoxでWebコンソールを開くには、右上隅のアドレスバーの横にある☰メニューに移動します。
そこから、レンチアイコンで表されている[開発者]ボタンをクリックすると、[Web開発者]メニューが開きます。 それを開いた状態で、Webコンソールメニュー項目をクリックします。
これを行うと、ブラウザウィンドウの下部にトレイが開きます。
LinuxおよびWindowsの場合はキーボードショートカットCTRL+ SHIFT + Kを使用して、またはCOMMAND +OPTIONを使用してWebコンソールにアクセスすることもできます。 ] + K（macOS）。
コンソールにアクセスしたので、JavaScriptでコンソール内で作業を開始できます。
クロム
ChromeでJavaScriptConsole を開くには、ブラウザウィンドウの右上にあるメニューに移動して、縦に3つの点が並んでいることを示します。 そこから、[その他のツール]、[開発者ツール]の順に選択できます。
これにより、上部のメニューバーにあるコンソールをクリックして、JavaScriptコンソールがまだ強調表示されていない場合に表示できるパネルが開きます。
LinuxまたはWindowsではキーボードショートカットCTRL+ SHIFT + Jを使用して、またはCOMMAND + [ MacOSではX152X]+J。これにより、すぐにコンソールにフォーカスが移ります。
コンソールにアクセスしたので、JavaScriptでコンソール内で作業を開始できます。
コンソールでの作業
コンソール内で、JavaScriptコードを入力できます。
文字列Hello, World!を出力するアラートから始めましょう。
alert("Hello, World!");
JavaScriptの行に続いてENTERキーを押すと、ブラウザに次のアラートポップアップが表示されます。
コンソールは式の評価結果も出力することに注意してください。式が明示的に何かを返さない場合は、undefinedと表示されます。
クリックし続ける必要のあるポップアップアラートを表示するのではなく、console.logを使用してコンソールにログインすることでJavaScriptを操作できます。
Hello, World!文字列を出力するには、コンソールに次のように入力します。
console.log("Hello, World!");
コンソール内に、次の出力が表示されます。
OutputHello, World!
JavaScriptを使用して、コンソールで数学を実行することもできます。
console.log(2 + 6);
Output8
さらに複雑な計算を試すこともできます。
console.log(34348.2342343403285953845 * 4310.23409128534);
Output148048930.17230788
さらに、変数を使用して複数の行で作業できます。
let d = new Date();
console.log("Today's date is " + d);
OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)
コンソールを介して渡したコマンドを変更する必要がある場合は、キーボードで上矢印↑キーを入力して、前のコマンドを取得できます。 これにより、コマンドを編集して再送信できます。
JavaScriptコンソールは、ターミナルシェルインターフェイスに似た環境を使用できるようにすることで、JavaScriptコードをリアルタイムで試すためのスペースを提供します。
HTMLファイルの操作
また、コンソールでHTMLファイルまたは動的にレンダリングされたページのコンテキスト内で作業することもできます。 これにより、既存のHTML、CSS、およびJavaScriptのコンテキスト内でJavaScriptコードを試すことができます。
コンソールでページを変更した後、ページをリロードするとすぐに、ドキュメントを変更する前の状態に戻ることに注意してください。他の場所に保持したい変更は必ず保存してください。
次のindex.htmlファイルなどの空白の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に見出しを挿入します。
let d = new Date(); document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
コンソールに次の出力が表示されます。
Output"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"
この時点で、ページは次のようになります。
また、背景色など、ページのスタイルを変更することもできます。
document.body.style.backgroundColor = "lightblue";
Output"lightblue"
ページ上のテキストの色と同様に：
document.body.style.color = "white";
Output"white"
これで、ページは次のようになります。
ここから、<p>段落要素を作成できます。
let p = document.createElement("P");
この要素を作成したら、次に、段落に追加できるテキストノードを作成できます。
let t = document.createTextNode("Paragraph text.");
テキストノードを変数pに追加して追加します。
p.appendChild(t);
最後に、pに段落<p>要素を追加し、テキストノードをドキュメントに追加します。
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コンソールの操作の概要と、ワークフローで使用できる他の開発ツールに関する情報を提供しました。
