ブラウザで JavaScript を編集する
ブラウザを使用して、JavaScript ソースコードファイルの変更を編集および保存できます。通常、開発者は実行時にコードをライブでデバッグする必要があります。ブラウザの開発者ツールを使用すると、ローカルに保存されているファイルを簡単に編集したり、コードをデバッグしたりできます。
この記事では、Google Chrome や MozillaFirefox などの一般的なブラウザの開発者ツールの機能と、その機能を使用して JavaScript ファイルを編集する方法について説明します。
Google Chrome で JavaScript を編集する
Google Chrome は、JavaScript コードを変更するための最も効率的で優れた方法を提供します。フォルダを Google Chrome デベロッパーツールのワークスペースに関連付けることもできます。
この機能を使用するには、いくつかの手順を実行します。以下の手順に従って、開発者ツールをよりよく理解してください。
-
開発者ツールを起動する
JavaScript ローカル/サーバーファイルを Google Chrome にロードします。
メニュー>>その他のツールに移動すると、開発者ツールオプションが表示されるか、ショートカットキー（F12）を押して開発者ツールを開きます。 -
ソースタブソースタブに移動し、ファイルエクスプローラーを調べて、変更を加えるために探しているファイルを特定します。ファイルを編集して変更することはできますが、ページを更新または再読み込みすると、すべての変更が失われます。心配な場合は、次の手順で変更を保存できるので問題ありません。
-
フォルダとワークスペースの関連付け
ファイルシステムタブをクリックしてフォルダをワークスペースに追加します。Google Chrome が確認を求めます。アクセス許可を許可する必要があります。シングルクリックを使用して、エクスプローラーからシステムのファイルを開くことができます。 -
編集して保存
最後に、CTRL + Sキーを押してコードを編集し、変更を保存してから、ブラウザーを更新します。
MozillaFirefox で JavaScript を編集する
Mozilla Firefox には、同じ機能を実現するためにブラウザ内の JavaScript を編集するための他のプラグインが用意されています。
Firebug などの機能が JavaScript コードをデバッグする方法をいくつかの手順で調べます。強調表示された構文エラーも表示できます。
-
Firebug プラグインをインストールします
まず、メニュー内のアドオンテーマから Firebug プラグインをインストールする必要があります。メニューからプラグインに移動し、
Firebugという名前で検索してインストールします。 -
編集するページを作成して開く
JavaScript コードは、ワードパッドやメモ帳などで記述できます。
作成した HTML ページをロードし、Firebug コンソールを開いて HTML ファイルを作成する必要があります。次に、
スクリプトタブに移動して、そのページソースの JavaScript コードを表示します。 -
ブレークポイントのデバッグ
コードの実行を終了するには、ブレークポイントを使用できます。エラーを視覚化するためにコードのスコープを指定することもできます。これはデバッグに非常に役立ちます。
-
変更された変数を更新します
ステップオーバーボタンをクリックできます。Firebug は、ブレークポイントの実行を終了するまで、すべての変数を更新します。ウォッチウィンドウの Firebug コンソールによって表示される値を確認します。 -
変更の表示/読み込み
最後に、ページをリロードしてファイルの変更を表示し、CTRL + Rショートカットキーを押します。