bugger - 提供Chrome Devtools绑定实现在Chrome中调试程序

bugger - 提供Chrome Devtools绑定实现在Chrome中调试程序

bugger

Warning: Experimental

bugger provides Chrome Devtools bindings for node. It integrates tightly with Chrome which means two things:

It attempts to fully support the usual Devtools experience, including workspaces and profiling tools.It may break at any moment because Chrome moves fast.

Installation

npm install -g bugger

Usage

Start the script process

Start example/alive.js in debug mode:

bugger example/alive.js

Pass parameters to the script:

# This will be interpreted as a port paramter for alive.jsbugger example/alive.js --port=3000# This will be interpreted as a port paramter for bugger itselfbugger --port=3000 example/alive.js

Pass V8 options (or advanced node options):

node --trace_gc $(which bugger) example/alive.js

Open the devtools

The correct URL will be written to the output. It should look similar to this:

chrome-devtools://devtools/bundled/devtools.html?ws=127.0.0.1:8058/websocket

You can also open chrome://inspect if you started Chrome with --remote-debugging-targets=localhost:8058. The process should pop up on that page almost immediately.

Options:

-v, --version: Print version information-h, --help: Show usage help-p, --port: The devtools protocol port to use, default: 8058-b, --brk: Pause on the first line of the script

Examples:

Using bugger with popular frameworks is easy and it is a lot faster then using node-inspector.

Jest:

Run node with bugger and jest:

node --harmony $(which bugger) ./node_modules/jest-cli/bin/jest.js --runInBand

A chrome devtools URL will appear in console, just copy and paste it into chrome.

Mocha:

Run bugger it with _mocha:

bugger --brk $(which _mocha)

A chrome devtools URL will appear in console, just copy and paste it into chrome.

Features

Console Tab

Basic support for console APIEvalute expressions in the consoleFully featured repl when not paused (including require)Parts of the Command Line API supported

Sources Tab

Step-by-step debuggingVariable introspectionLive edit the running JavaScript code and persist it using workspaces (really just a Devtools feature)Break on [uncaught] exceptionUses existing source maps (e.g. created via babel --source-maps or coffee --map)Forked modules show up as worker threads. This includes modules forked via cluster.

Known Issues

For babel-core/register and coffee-script/register, editing the files doesn't work #48

Network Tab

Monitor outgoing http(s) requests your script doesTiming of requests, including connect times etc.

Timeline Tab

GC eventsBasic heap usage graphs

Known Issues

The timeline tab doesn't do anything useful right now. In future it should show (#47): console.{time, timeEnd, timeStamp}Network requestHeap usage over timeProfiling data

Profiles Tab

Heap snapshotsCPU profilesTrack heap allocationsInspect heap objects in the console via $0..$4

Kudos to...

...the original projects

bugger was heavily inspired by node-inspector and nodebug.

Reference links

https://chromium.googlesource.com/chromium/blink.githttp://chromedevtools.github.io/debugger-protocol-viewer/Debugger/https://github.com/nodejs/node

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。