たいさブログ

taisa's engineer blog

JavaScript

node-nightlyを使ってwebpackをデバッグする

投稿日:2018年6月26日 更新日:


webpackに限らずだけどnode-nightlyを使うと簡単にデバッグすることができる

Debugging

When contributing to the core repo, writing a loader/plugin, or even just working on complex project, debugging tools can be central to your workflow. Whether the problem is slow performance on a large project or an unhelpful traceback, the following utilities can make figuring it out less painful.

node-nightlyをインストールする

インストール後一度初期化を行う

webpackの実行環境をつくる

デバッグする為にwebpackの実行環境をつくる

npm initしてwebpackをディレクトリ配下にインストールする

webpack-cliをインストールする。ここではグローバルインストールとしている。

webpack.[prod].jsをコマンドラインから作成する

以下のように聞かれるので好みの設定をする(今回はデフォルトを利用)

webpack-cliで設定したディレクトリとファイルを作成する

ここではindex.jsからhello.jsを呼び出す形にした

index.js

hello.js

ちゃんとビルドできるかチェック

正常にビルドできた

node-nightlyを使ってデバッグする

node-nightly--inspect-brkオプションを使うと1行目で止まってくれる

webpackのデバッグを実行

コマンドを実行したらchromeで以下のURLにアクセスする

すると下記のようにinspectリンクが出てくるのでクリックする

クリックするとデバッガが立ち上がり、1行目で止まるのでステップ実行していくことができる。オプションを変えれば1行目で止まらないことも可能。

node-nightlyを使えばwebpackに限らずnpmモジュールのデバッグが簡単にできる


-JavaScript
-, ,

執筆者:

関連記事

Rust+WebAssembly で Hello, World!

以前 Rust をはじめてみよう!という記事を書いた。今回は Rust + WebAssembly を使って Hello, World!の出力をやってみた。 WebAssembly について まず W …

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1. …

「はじめてのフロントエンド開発」という共著本を出版しました

『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。 React、Angular、Vue.j …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …

Firebase Cloud Firestore 使い方の勘ドコロ

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocume …

Top