たいさブログ

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

執筆者:

関連記事

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 ―「良いパーツ」に …

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

『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。 自分はこの中の第3章の環境構築を担当し …

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

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

Top