Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術塾 / NodeJSの基本の3つのデバッグ方法

2018年4月13日 By KD コメントを書く

NodeJSの基本の3つのデバッグ方法

NodeJSの基本の3つのデバッグ方法

今回から「技術塾」と題して主に初心者向けに基本的な技術情報を提供するカテゴリを作りました。最初の内容は、NodeJSアプリケーション開発において必須のスキルであるデバッグです。デバッグのできないプログラマなんて、寿司の握れない板前、英会話のできない英語教師、ホームランの打てない4番バッター、はたまた、メダルを逃したオリンピック選手(これはちょっと違うか)、例えたら切りが無いですね。今回はそんな残念なNodeJSプログラマにならないために、基本となる3つのデバッグ方法を紹介します。

見出し

  • 1 はじめに
  • 2 基本の3つのデバッグ方法
    • 2.1 デバッグ用のソースコードの準備
    • 2.2 標準のデバッガーでのデバッグ
    • 2.3 Chromeでのデバッグ
    • 2.4 Visual Studio Codeでのデバッグ
  • 3 最後に
  • 4 環境
    • 4.1 関連記事

はじめに

NodeJSに限らずデバッグはプログラマ、エンジニア、デベロッパーにとって必ずマスターしなければいけないスキルの一つです。そのスキルが無いと、バグが発生した時に原因を突き止めて改修することが事実上不可能だからです。

今回はNodeJSの初心者を対象として、基本となる3つのデバッグ方法を紹介しますので、必ずマスターしましょう。

なお、デバッグの0番目の方法としてconsole.logがありますが、当たり前なので書きません。

基本の3つのデバッグ方法

デバッグ用のソースコードの準備

それではデバッグを試すためだけの簡単な環境を準備しましょう。

$ mkdir nodejs-debugging
$ cd nodejs-debugging/
$ yarn init -y
$ yarn add node-emoji
$ touch debugging.js

「debugging.js」は以下にします。

const emoji = require('node-emoji');

const puppy = {
  name: 'Pochi',
  age: 1,
  feeling: emoji.get('heart'),
  owner: 'Tom Cruise'
};

console.log(puppy);

単にオブジェクトをコンソールに出力するだけのコードです。

標準のデバッガーでのデバッグ

1つ目は「debugger」と「inspect」コマンドを使うコンソールでのデバッグ方法を紹介します。これはnode-inspectという機能で、NodeJSには最初から搭載されています。

やり方はアナログですが、ブレークポイントを設定したい場所に「debugger」を書きます。

スクリーンショット 2018 02 22 5 05 38

続いて、「node inspect」コマンドにより、デバッグを開始します。

スクリーンショット 2018 02 22 5 06 41

「c」コマンドにより、ブレークポイントまで進みます。

スクリーンショット 2018 02 22 5 11 34

ブレークポイントで停止した状態で、「repl」コマンドを実行することで、値を確認したり、値を変更したりできます。今回はpuppyのfeelingをheartからrelaxedに変更しました。確認や変更が終わったらControl+Cでこのモードから抜けます。

スクリーンショット 2018 02 22 5 11 57

そして、「c」コマンドを実行すると他にブレークポイントが無いので終了します。値を変更した箇所は変更されたままで出力されていることが確認できます。「.exit」でデバッグを終了します。

スクリーンショット 2018 02 22 5 14 26

デバッグ時のコマンドは以下です。

  • cont, c … ブレークポイントまで進む
  • next, n … 次のステップへ進む
  • step, s … ステップイン
  • out, o … ステップアウト
  • pause … ポーズ

今回使ったのは「c」コマンドだけですが、詳しくは公式ドキュメントを参照して下さい。

Chromeでのデバッグ

2つ目はCromeのDevToolを使ってデバッグ方法を紹介します。まさにNodeJSがJavascriptであることを活かしたデバッグ方法です。

まず、Chromeを開き、「chrome://inspect/」を表示します。

スクリーンショット 2018 02 22 5 42 12

次にコマンドラインで「node –inspect-brk」を実行しましょう。

$ node --inspect-brk debugging.js
Debugger listening on ws://127.0.0.1:9229/b50c177f-31d8-4db5-aac8-2411cdce33d9
For help see https://nodejs.org/en/docs/inspector

先程のChromeの画面にRemote Targetが表示されます。そうしたら「Open dedicated DevTools for Node」のリンクをクリックします。

スクリーンショット 2018 02 22 5 45 30

するとChromeのデバッグ画面が表示されます。

スクリーンショット 2018 02 22 5 47 07

試しに、コンソールのデバッグでやったのと同じことをしてみましょう。デバッグ画面からブレークポイントを設定します。ソースコードの横をクリックするだけです。

スクリーンショット 2018 02 22 6 02 47

右上の三角のボタンをクリックするとデバッグが開始されます。以下のようにブレークポイントで止まり、値を確認できます。

スクリーンショット 2018 02 22 6 05 08

Chromeのコンソールから値を確認することもできます。今回はfeelingの値をcycloneに変更しました。

スクリーンショット 2018 02 22 6 07 29

もう一度右上の三角ボタンをクリックすると、他のブレークポイントが無いので、デバッグが終了します。コンソールに結果が出力されています。

スクリーンショット 2018 02 22 6 09 27
この方法はかなり便利で、特にnodemonでアプリケーションを起動している場合は、ソースコードを変更してすぐに、デバッグの画面が更新されてます。node-inspectよりはるかにデバッグが簡単です。

Visual Studio Codeでのデバッグ

3つ目はVS Codeを使ったデバッグ方法を紹介します。

ソースコードをVS Codeで開き、左側の虫のようなアイコンをクリックします。

スクリーンショット 2018 02 22 6 37 41

するとデバッグ画面が表示されるので、上の「構成がありません」をクリックします。

スクリーンショット 2018 02 22 6 19 02

そして、「構成の追加」を選びます。

スクリーンショット 2018 02 22 6 19 18

「環境の選択」には「Node.js」を選びます。

スクリーンショット 2018 02 22 6 42 35

すると「launch.json」というデバッグ設定ファイルが自動生成されます。

スクリーンショット 2018 02 22 6 20 21

今回は単にデバッグモードで実行できれば良いので、デバッグ設定ファイル(launch.json)は以下のように設定します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run",
      "program": "${workspaceFolder}/debugging.js"
    }
  ]
}

後は、Chromeの時と同じようにデバッグできます。

ソースコードの右側をクリックして、ブレークポイントを設定します。

スクリーンショット 2018 02 22 6 45 43

デバッグボタンをクリックするとデバッグが開始されます。

スクリーンショット 2018 02 22 6 48 25

ブレークポイントで止まっている状態では以下のようになっています。

スクリーンショット 2018 02 22 6 50 41

それでは、先ほどと同じように値を変更してみます。デバッグコンソールからChromeの時と全く同じように値を扱えます。

スクリーンショット 2018 02 22 6 53 10

値の確認と変更が終わったら、上にある三角のボタンをクリックすれば、実行が再開されます。

スクリーンショット 2018 02 22 6 54 51

デバッグコンソールに結果が出力されて、デバッグが終了しました。

スクリーンショット 2018 02 22 6 56 43

この方法であれば、VS Codeのエディタ上でコーディングからデバッグまで完結させることができ、大変便利です。なので、当然これが一番オススメの方法です。

デバッグ設定ファイルの詳細はVS Codeの公式サイトを参照して下さい。

最後に

いかがでしたか?これでNodeJSのデバッグ方法の基本はマスターできたと思います。自分の関わったアプリケーションで障害が出た時に、華麗にデバッグして原因を究明し、ささっと改修してプロの仕事を見せつけましょう。それでは。

環境

  • NodeJS : v9.5.0
  • node-emoji : 1.8.1
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

    最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #5 ビルド編

    Congratulations!!ここまでお疲れ様でした。今回で最後です。前回までで「文章を話すデスクトップアプリ」の全…

  • [tips][Tool] MacでRubyとPythonとJavaとNodeとPerlの複数バージョンを管理する方法

    iPhone6sですか?予約しました、Keidです。 今月で20代ラストの年になってしまいました。30代が目前になるとい…

カテゴリ : 技術塾 タグ : debug, nodejs

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #4 メニューバー実装編

    最近はITの情報は全て英語で仕入れるようになりました。英語ができるからではありません。単純に新しいことをやろうとすると日…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #1 開発環境準備編

    最近Electronが面白くて仕方がないです。なんてったって、Webの標準技術でデスクトップアプリが作れちゃうんですから…

  • [Tutorial][Electron] Electronで文章を話すアプリを作ってみよう #5 ビルド編

    Congratulations!!ここまでお疲れ様でした。今回で最後です。前回までで「文章を話すデスクトップアプリ」の全…

  • [tips][Tool] MacでRubyとPythonとJavaとNodeとPerlの複数バージョンを管理する方法

    iPhone6sですか?予約しました、Keidです。 今月で20代ラストの年になってしまいました。30代が目前になるとい…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes