たいさブログ

taisa's engineer blog

JavaScript

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

投稿日:

Pocket

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モジュールのデバッグが簡単にできる

Pocket

-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年の発売後にも読んでいたけど今あらためてじっくりと読み返したらその時は気づかなかった新し …

JavaScriptパターン

「JavaScriptパターン」第4章-関数-が面白かったからまとめながら写経した

タイトルにあるようにとても面白かったというのと、JavaScriptパターンの輪読会で第4章「関数」の後半を担当したのでその記録も兼ねて内容まとめながら写経した。 目次 はじめに 4.1 背景 4.2 …

ECMAScript 6を触ってみる – モダンになった文法

WEB+DB PRESS Vol.87は、@t_wadaさんの言うとおりES6を速習するのにとても良い書籍だと思う。個人的には「JavaScript: The Good Parts ―「良いパーツ」に …