Salesforce 開発者コンソール デバッグ｜ワークスペースの準備とJavaScriptのサンプルコード

Salesforce 開発者コンソール デバッグ概要

Salesforceにおいて開発者コンソールでデバッグする場合によく使用されるのが、ブラウザでの開発者コンソールを使用したデバッグです。JavaScriptだとエラーが出た場合に、ブラウザで確認できます。 Chromeで行う場合は、ショートカットキーでF12でソース確認画面が出てきます。コンソール画面も搭載されてるので、エラーが出た場合に何故エラーが出たのか確認ができます。

Salesforce 開発者コンソール ブラウザでのデバッグについて

Salesforce 開発者コンソール ブラウザでのデバッグは、JavaScriptでのデバッグを行った場合、F12でコンソール画面を出した場合でなければ確認ができません。 コンソール画面を出すとエラーが発生する場合は、コンソールログにエラーメッセージが表示されます。例えばJavaScriptの読み込みに失敗した場合は、NOTFOUNDエラーが表示されます。

JavaScriptのエラー原因

上記のエラーだとJavaScriptの読み込みパスを変更するか、読み込み元のhtmlファイルの読み込みタグの記述ミスの可能性が高いでしょう。その際には、パスを確認しタグの誤っている箇所の修正を行います。 もしそれでもエラーが出る場合は、別のエラーが考えられます。例えばjqueryだとJavaScriptファイルを読み込んだ後に、読み込まないとエラーになります。

vscodeでの開発者コンソールデバッグについて

vscodeでの開発者コンソールでのデバッグを行う場合は、vscodeのプラグインを入れる方法が主になります。プログラミング言語に応じたデバッグ用のプラグインが存在します。 例としてpythonでデバッグする場合は、python用の拡張機能をインストールします。拡張機能をインストール後は、任意のpythonファイルを作成しブレークポイントを指定後にデバッグを行います。

vscodeデバック環境の準備

vscodeでpythonのデバッグ環境を用意する場合の手順を記載します。上記でも記載しましたが、vscodeでpythonのデバッグ環境を用意するには、vscodeでpythonのプラグインをインストールする必要があります。 vscodeで、画面左の拡張機能のメニューアイコンをクリック後にpythonのプラグインを検索しインストールします。インストール後にvscodeのワークスペースを開きます。

ワークスペースの準備とJavaScriptのサンプルコード

開発用フォルダを作成し、そこをワークスペースとしても問題ありません。開いたワークスペースにpython用のファイルを作成します。 ワークスペースの表示ペインで右クリックし、新規ファイルを作成することもできます。作成したファイルに下記コードを記載し保存して下さい。

 print('test debug') 

記載後に、画面左のデバッグメニュー用のアイコンをクリックします。虫のようなマークになります。

pythonのデバック環境完成

デバッグメニュー用のアイコンをクリックすると「lauch.jsonファイルを作成します」といったリンクがありますので、クリックします。その後表示される画面にて、pythonを選択します。 ここまででpythonのデバッグ環境は整いました。上記で作成したpythonファイルのコードにブレークポイントを設定し画面上部の三角ボタンをクリックすると、デバッグがスタートします。

Salesforceでのプログラミングでの開発者コンソールについて

Salesforceでのプログラミングでの開発者コンソールは、様々な環境でデバッグが行えます。Salesforceでは、主にブラウザでのシステムになるのでブラウザでの開発者コンソールでデバッグを行うことが多くなります。 Chromeの場合は上記で説明した通り、ショートカットでのF12で開発者コンソールを表示できます。開発者コンソールでは、HTMLタグを編集できます。編集自体は、実ファイルには影響しません。

Chrome以外の開発者コンソールについて

Chrome以外でも開発者コンソールは存在します。例えばFirefoxの場合、キーボードショートカットでCtlとShiftとjで開発者コンソールを、起動できます。 FirefoxもChrome同様にHTMLタグの編集が可能です。HTMLタグの編集は、ブラウザ上だけになるのでリロードすると元に戻ります。ブラウザ上でHTMLタグの編集をし、実ファイルにコピーアンドペーストすると編集した状態になります。

コードの改行について

コンソールからJavaScriptのコードをデバッグすることができます。コンソールメニューの起動後にコンソール画面に直接コードを記載し、Enterを押すとデバッグが可能です。 コードの改行は、ShiftとEnterを押すと可能になります。改行後は、コードを入力しEnterを押すとJavaScriptの実行が可能です。 エラーが発生するとコードの下記にエラーが出るので、わかりやすいでしょう。

Salesforce開発者コンソールのデバック方法

Salesforce 開発者コンソール デバッグする方法を説明しました。他のIDEソフトでも便利なデバッグ機能が存在します。 ブレークポイントの設定が可能になるので、デバッグがしやすい機能を有効に活用することが効率的な開発に繋がります。]]>