Chrome ブラウザで JavaScript を実行

この章では、Chrome ブラウザで JavaScript コードを実行およびデバッグする方法を紹介します。

Chrome は Google が開発した無料の Web ブラウザで、フロントエンド開発（特にコードのデバッグ）にとって非常に便利です。

Chrome 公式サイトのアドレス：https://www.google.com/intl/zh-CN/chrome/。

Chrome ブラウザでは、F12ボタンを押すか、ページを右クリックして「検査」を選択して開発者ツールを開きます。

または、右上隅のメニューバーで「その他のツール」→「開発者ツール」を選択して開くこともできます：

1、Console ウィンドウで JavaScript コードをデバッグ

開発者ツールを開くと、Console ウィンドウで JavaScript コードをデバッグできます。下図のとおりです：

上の図では、>記号の後ろに実行したいコードを入力します。console.log("サンプル")、Enter キーを押すと実行されます。

他の場所からコードをコピーして実行することもできます。たとえば、次のコードを Console ウィンドウにコピーして Enter キーを押すと実行されます：

console.log("サンプル-1")
console.log("サンプル-2")

Console ウィンドウの内容をクリアするには、以下のボタンを押します：

2、Chrome snippets スクリプト

Chrome ブラウザでスクリプトを作成して実行することもできます。開発者ツールで Sources パネルをクリックし、Snippets タブを選択して、ナビゲーターで右クリックし、Create new snippet を選択して新しいスクリプトファイルを作成します：

Snippets が表示されない場合は、パネル下部の>>をクリックすると表示されます。

Create new snippet をクリックすると、自動的にファイルが作成されます。右側のウィンドウに以下のコードを入力し、Command+S（Mac）または Ctrl+S（Windows および Linux）を押して変更を保存するだけです。

console.log("サンプル-1")
console.log("サンプル-2")

保存後、ファイル名を右クリックして「Run」を選択するとコードが実行されます：