【VSCode】Debugger for ChromeでJavaScriptをデバッグしてみよう!VueやReactで使える!

VSCodeでデバッグ
  • URLをコピーしました!

今回は、Debugger for Chromeでデバッグする方法を紹介いたします。
VueやReactなどのJavaScript開発でVSCodeを使っているが、どうやってデバッグするのかわからない方はぜひ参考にしてください!

VueやReactの開発を試してみたい方がいれば、こちらを参考にしてみてください!

クマじい

わしにも分かるように頼むぞ。

・・・
そこまで難しくないので、早速説明に入っていきますね!!

目次

Debugger for Chromeをインストール!

まずは、Debugger for ChromeというExtensionsをインストールしていきます!

Extensions:拡張機能のこと
Extensionsをインストールすることにより、効率よく開発を行えるようになります!

左のメニューから□が4つあるアイコンを選択します!
検索欄に「Debugger for Chrome」と検索すると、下の画像のようなExtensionが出てきますので、インストールしてください!

File Edit Selection View 
EXTENSIONS: MARKETPLACE 
Debugger for Chrome 
Go 
Run 
Terminal 
Help 
Extension: Debugger for Chrome - sample-client - Visual Studio Code 
Extension: Debugger for Chrome X 
x 
Debugger for Chrome 
4.1212 
07.2M 
Debug your JavaScript code in the Chrome browser, or any other target that supp... 
Microsoft 
Debugger for Java 
0310 
A lightweight Java debugger for Visual Studio Code 
Microsoft 
ElixirLS: Elixir support and debugger 
co 7.4M 4 
Install 
0134K 
Elixir support with debugger, autocomplete, and more. Powered by ElixirLS. 
ElixirLS 
Debugger for Firefox 2.9.1 
Debug your web application or browser extension in Firefox 
Firefox DevTools 
Maven for Java 0.27.1 
Install 
Q 975K 
Install 
07.1M 
Debugger for Chrome sjsdiag.debugger-for-chro 
Microsoft Repository License v4.12.12 
Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol. 
This extension is enabled globally. 
This extension is recommended based on the files you recently opened. 
Details Feature Contributions Changelog 
:rotating_light: Important 
Please file issues on the repo for the new js-debug extension. By default, this extension now delegates to that one which is built-in to VS Code. 
TERMINAL PROBLEMS OUTPUT 
DEBUG CONSOLE 
Filter (e.g. text, !exdude) 
Manage Maven projects, execute goals, generate project from archetype, improve... 
Microsoft 
Apex Interactive Debugger 
50.160 
Provides debugging support for the Apex programming language 
Salesforce 
Project Manager for Java 018.0 
Manage Java projects in Visual Studio Code 
Microsoft 
Language Support for Java(TM) by Red Hat 0.740 
Install 
0499K 5 
Install 
06.1M 
Install 
087M *3.5 
Java Linting, Intellisense, formatting, refactoring, Maven/Gradle support and more... 
Install 
Red Hat 
Chinese (Simplified) Language Pack for Visual Studio Code 1.53.2 08.1M * 5 
master 
Microsoft 
Debugger for Unity 3.02 
Unity debugger extension 
unity Technologies 
EditorConfig for VS Code 0164 
EditorConfig Support for Visual Studio Code 
EditorConfig 
@oAo 
Install 
co 809K *3.5 
Install 
03M 
Install

インストールはこれだけです!!

launch.jsonを作成する!

Debugger for Chromeは、インストールしただけでは使えるようにはなりません。
次に、launch.jsonを作成していく必要があります!

まず、左のメニューから▷に虫みたいなアイコンを選択してください!
下の画面が表示されると思います!

File Edit 
RUN 
Selection 
View 
Go 
Run 
Terminal 
Help 
sample-client - Visual Studio Code 
Show All Commands 
Go to File 
Find in Files 
Start Debugging 
Toggle Terminal 
x 
Open a file which can be debugged or 
run. 
Run and Debug 
To customize Run and Debug create a 
launchjson file. 
Show all automatic debug 
configurations. 
Ctrl + Shift + P 
Ctrl + p 
Ctrl + Shift + F 
Ctrl + @

左の表示欄の「create a launch.json file」を選択します。
Select Environmentという欄が出てくるので「Chrome」を選択してください!

すると、launch.jsonの編集画面が表示されると思います!
基本的にはこのままで大丈夫ですが、「url」には注意してください!

Vueは、デフォルトのポート番号が「8080」なのでこのままでもいいのですが、
Reactはデフォルトのポート番号が「3000」だったり、個別でポート番号を変えている場合は、変更したポート番号に合わせて書き換えてください!

File Edit Selection 
RUN 
v VARIABLES 
v WATCH 
v CALL STACK 
v BREAKPOINTS 
p master @OAO 
View Go Run Terminal Help 
Launch Chrome against localhost v 
Launch Chrome against localhost (sample-client) 
launch.json - sample-client - Visual Studio Code 
{l launch.json X 
.vscode > launch.json > 
o 
x 
1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
// Use IntelliSense to learn about possible attributes. 
// Hover to view descriptions of existing attributes. 
// For more information, visit: https://go.microsoft.com/fw1ink/?1inkid=830387 
"verslon " : 
"e. 2.0", 
" configurations" : 
"type" • 
"pwa-chrome" , 
"request": "launch" , 
"name": "Launch Chrome against localhost" , 
"url " : 
" http : / /localhost : 8080" , 
"webRoot": "${workspaceF01der}" 
1, col 
Add Configuration.„ 
c 
SON with Comments

Debugger for ChromeをVueで試してみる!

今回は、こちらで作成しているVueのアプリでデバッグを試してみます!

まずは、アプリを実行しましょう!
ここでRunningしているURLと先程のlaunch.jsonのURLが同じであることを確認してください!

実行したら、任意の場所にブレイクポイントを設定して、左上の▷実行ボタンを押します!
すると、しっかりブレイクポイントで止まってくれます!

File Edit Selection View Go Run Terminal Help 
RUN Launch Chrome against localhosl v 
v VARIABLES 
> Eval 
Closure (JsWmain.js) 
> 
Global 
main.js - sample-client - Visual Studio Code 
mainjs X 
JS 
src > JS main.js > 
D 
1 
2 
3 
4 
5 
6 
7 
8 
9 
import Vue from 'vue 
import App from ' . [App . vue ' 
Vue . config. productionTip 
false 
ew Vue({ 
render: h h(App), 
}) .$munt( '#app') 
v WATCH 
v CALL STACK 
v maunch Chrome against loc... 
(anonymous> 
TERMINAL PROBLEMS OUTPUT 
DEBUG CONSOLE 
[HMR] Waiting for update signal from WDS. 
Filter (e.g. text, !exdude) 
x 
_(webpack) /hot/10%js : 24 
PAUSED ON BREAKPOINT 
src/main.js 6:1 
./src/main . js 
local host:8080/js/app.js 114&1 
webpack_require 
fn 
1 
localhost:8080/js/app.js 
localhost:8080/js/app.js 151:20 
localhost:8080/js/app.js 1161:18 
webpack_require 
checkDeferredModu1es 
localhost:8080/js/app.js 
localhost:8080/js/app.js 
(anonymous> 
(anonymous> 
> 
LOADED SCRIPTS 
v BREAKPOINTS 
Caught Exceptions 
Uncaught Exceptions 
main.js src 
localhost:8080/js/app.js 925:18 
localhost:8080/js/app.js 92&10 
6

ブラウザが複数実行されているときは、一度ブラウザを落としてから実行ボタンを押してみてください!

Debugger for Chromeの使い方は、ここまでです!
Chromeで画面を見ながらデバッグしたいときにおすすめのExtensionです!

まとめ

デバッグできるようになると、エラー原因を見つけるのが楽になったりします!
まだデバッグしたことないよ。。エラーの原因が分からないよ。。という方は、ぜひ活用してみてください!

詳細情報は、Visual Studio Marketplaceで確認することができますので、行き詰まった場合は参考にしてみてください!

VueやReactを初心者の方でも分かるように説明しておりますので、もし興味があれば過去の記事も見てもらえると嬉しいです!

VSCodeでデバッグ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次
閉じる