たいさブログ

taisa's engineer blog

JavaScript

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

投稿日:


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
-, ,

執筆者:

関連記事

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

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

ECMAScript 6を触ってみる – 標準化されたモジュール管理システム

前回に引き続きJSの速習コース実践ラスト。最後は「WEB+DB PRESS Vol.87 第1特集 第6章-標準化されたモジュール管理システム-」を速習する。 これまでのモジュール管理 JavaScr …

Web API The Good Partsをじっくり読み返したら新しい気づきがあった

Web API The Good Partsの読書会をする機会があって、2章と3章をじっくり読み返した。2014年の発売後にも読んでいたけど今あらためてじっくりと読み返したらその時は気づかなかった新し …

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

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

ECMAScript 6を触ってみる – 非同期処理 PromiseとGeneratorによるフロー制御

前回に引き続きJSの速習コースを実践。今回は「WEB+DB PRESS Vol.87 第1特集 第5章-簡潔で柔軟な非同期処理-」を速習する。 PromiseとGeneratorによるフロー制御 これ …