hihat, 使用 Chrome DevTools的本地 node/浏览器开发

分享于 

11分钟阅读

GitHub

  繁體 雙語
:tophat: small tool for running browser tests locally
  • 源代码名称:hihat
  • 源代码网址:http://www.github.com/Jam3/hihat
  • hihat源代码文档
  • hihat源代码下载
  • Git URL:
    git://www.github.com/Jam3/hihat.git
    Git Clone代码到本地:
    git clone http://www.github.com/Jam3/hihat
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Jam3/hihat
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    hihat

    hihat

    使用 Chrome DevTools的本地 node/浏览器开发

    在 Chrome DevTools进程中运行源文件。 保存文件将重新加载标签。

    这对于本地单元测试浏览器代码和完整的Web api ( WebGL,WebAudio等) 非常有用。 它提供对分析。调试器语句。网络请求等的访问。

    它还可以用于开发典型的node 项目,或者作为通用的 node REPL插件。 例如你可以使用来使用调试器,而不是在开发期间使用 nodemon插件。

    由于它提供浏览器和 node api,还可以用于一些简单的CLI工具,比如保存一个Canvas2D到一个PNG文件文件。

    下面是使用电子browserify和watchify。

    更新:2016年月

    许多新的努力正在向 devtool 发展,这是一个非常类似的项目,但是在幕后没有 browserifywatchify。 在许多方面,它取代了 hihat,但并非全部。 虽然 devtool 可能会得到更多的常规增强和维护,但这两种工具仍将继续存在。

    安装

    NPM

    这个项目目前最适合作为全球安装。 使用 npm 像这样安装:

    npm install hihat -g

    基本示例

    最简单的情况是在任何可以 browserified ( node/commonjs )的源文件上运行 hihat

    hihat index.js

    -- 之后的任何选项都将传递给 browserify。 例如:

    # transpile ES6 fileshihat tests/*.js -- --transform babelify

    你可以使用 --printconsole 日志记录重定向到你的终端:

    hihat test.js --print | tap-spec

    进程将一直保持打开状态,直到从客户端代码调用 window.close()。 还可以在使用中看到 --quit--timeout 选项。

    用法

    使用方法:

    hihat [entries] [options] -- [browserifyOptions]

    选项:

    • --port ( 默认 9541 )
      • 用于承载本地服务器的端口
    • --host ( 默认 'localhost' )
      • 本地开发服务器的主机
    • --dir ( 默认 process.cwd() )
      • 提供 static 文件的root 目录
    • --print
      • console.logconsole.error 将打印到 process.stdoutprocess.stderr
    • --quit
      • 捕获错误( 像语法) 将导致应用程序退出( 对单元测试有用)
    • --frame ( 默认 '0,0,0,0' )
      • 用于 x,y,width,height 窗口边界的逗号分隔字符串
      • 如果传递了两个数字,则被视为 width,height
      • 如果传递了 true,则使用本机默认大小
    • --no-devtool
      • 运行时不打开DevTools窗口
    • --raw-output
      • 在 stdout/stderr上不要静默 Chromium 调试日志
    • --node
      • 启用 node 集成( 请参见 node )
    • --no-electron-builtins
      • 启用 --node 后,忽略电子生成,使它的行为更像 node
    • --timeout ( 默认 0 )
      • 一个数字,将在这里持续时间之后关闭进程。 没有超时使用 0
    • --exec
      • --print--no-devtool--quit 选项的别名。 对于无头执行有用
    • --index=path/to/index.html
      • 替代默认的index.html 文件( 请参见 HTML索引 )
    • --serve
      • 什么是捆绑包入口点作为
      • 如果可能,默认为文件 NAME,否则为'bundle''
    • --browser-field
      • 可以指定 true 或者 false 来强制启用/禁用 "browser" 字段分辨率,而不独立于 --node 选项

    默认情况下,browserify将使用源映射。 你可以使用 --no-debug 作为browserify选项来更改这里选项:

    hihat test.js -- --no-debug

    node

    注意:寻找 node.js 特性的用户可能对 devtool 更感兴趣非常类似于 hihat,但更好的架构处理大型的node 应用程序。

    hihat还可以用于开发简单的 node 模块。 这个 --node 标志将禁用 "browser" 字段解析并使用实际的node 模块为 processBuffer"os",并在包外公开 require 语句,以便在开发时使用它。

    例如 foobar.js

    var fs =require('fs')fs.readdir(process.cwd(), function (err, files) {
     if (err) throw err
     debuggerconsole.log(files)
    })

    现在我们可以在 file: 上运行以下命令

    hihat foobar.js --node

    screenshot

    默认情况下,启用 --node 还将启用电子生成。 你可以通过 --no-electron-builtins 来禁用电子模块,使源行为更像 node。

    限制

    这种方法有一些已知的局限性。

    • 不支持使用本机扩展( 像节点画布一样。)的模块。
    • 典型的node.js 程序不同,你需要使用 window.close() 显式退出应用程序
    • 由于源是通过browserify运行的,所以初始构建时间很慢,像 require.resolve 这样的特性还不支持。 #21
    • process.stdin的某些特性是不可能的。 #12
    • 因为它运行电子而不是普通的node.js 运行时,所以可能产生一些异常结果

    如果没有任何条目文件指定 hihat,它将不会调用browserify或者 watchify。 例如可以将它作为 node REPL的通用替代,但是有更好的调试和各种网络 api。

    hihat --node

    例如:

    repl

    HTML索引

    默认情况下,hihat将提供一个简单的HTML index.html 文件。 你可以使用 --index 进行替代。 路径是 relative 到你当前的工作目录。

    hihat test.js --index=foo.html

    和以下 foo.html:

    <!doctype html>
    <head>
     <title>FOO</title>
     <metacharset="utf-8">
     </head>
    <body>
     <scriptsrc="test.js"></script> 
    </body>
    </html>

    你还可以指定 --serve 选项来强制你的包的某个入口点。 例如:

    hihat test.js --index=foo.html --serve=bundle.js

    使用这里选项,脚本标记将为:

    <scriptsrc="bundle.js"></script> 

    在大多数情况下,--serve 将默认为你输入文件的文件 NAME。 在复杂的情况下,如绝对路径或者 '.',可能默认为 'bundle.js'

    高级示例

    hihat的一些更高级用途。

    控制控制台中的prettify

    你可以使用browserify插件 tap-dev-tool 在控制台中打印出TAP输出。

    # install it locallynpm install tap-dev-tool --save-dev# now run it as a pluginhihat test.js -- -p tap-dev-tool

    使用 tap 或者磁带的文件将像这样记录:

    tap-dev-tool

    将剪贴板写入 stdout

    我们可以在电子中使用 clipboard MODULE,这样就可以把它写。

    paste.js:

    var clipboard =require('clipboard')process.stdout.write(clipboard.readText() +'n')window.close()

    然后运行:

    hihat paste.js --node --exec > clipboard.txt

    这将把剪贴板内容写到一个新文件,clipboard.txt

    将画布 2D 保存到PNG图像

    下面是一个将Canvas2D元素写入新PNG图像的示例,使用 electron-canvas-to-buffer

    render.js

    var toBuffer =require('electron-canvas-to-buffer')var canvas =document.createElement('canvas')var context =canvas.getContext('2d')var width =canvas.widthvar height =canvas.heightvar gradient =context.createLinearGradient(0, 0, width, 0)gradient.addColorStop(0, '#f39821')gradient.addColorStop(1, '#f321b0')context.fillStyle= gradientcontext.fillRect(0, 0, width, height)process.stdout.write(toBuffer(canvas, 'image/png'))window.close()

    现在运行以下命令:

    hihat render.js --node --exec > image.png

    image.png的结果是:

    image

    请参见

    • devtool - 类似工具,但专门用于 node,没有 browserify/watchify cruft

    许可证

    MIT,有关详细信息,请参阅 LICENSE.md


    LOC  CHR  chrome  Local  开发工具