LoginSignup
0
0

More than 3 years have passed since last update.

Chrome開発者ツールでrequireを使いたい

Posted at

動機

ローカルで動かす分にはnpx [package] だったり、よく使うなら npm install すればいい。
しかし、デバッグのために一時的にパッケージを開発者ツールで使えるようにしたい場合はどうすればいいのかの備忘録。

解決策

requireを有効化するためのscript(出典はcfにいくつか見つけた)を呼び、requireする。
●クライアントに読み込ませるためのファイルはbrowserifyのcdnを使っている(取得先はlocalhostに持っているなら書き換えて使っても良いと思う)。

cf
requiring npm modules in the browser console
https://gist.github.com/mathisonian/c325dbe02ea4d6880c4e
See this thread for details:
 https://github.com/mathisonian/requirify/issues/5
先人達がどうやって実現するかの意見交換が読める。

mathisonian/requirify-browser.js
https://gist.github.com/mathisonian/2d2faed1e16790ec816d
取得先はminifyされたコードの中に書いてあるのでversionには注意したい。

Requirify(Chrome拡張)
https://chrome.google.com/webstore/detail/requirify/gajpkncnknlljkhblhllcnnfjpbcmebm
難しいこと考えずに使うならこういう拡張もありかもしれない。
やっぱり取得するパッケージのversionには注意。

おまけ
browserify-cdn
https://wzrd.in/
ここでパッケージ名を指定し、スタンドアロンの(≒クライアントで動く)ファイルをURLを得ることができる。
ここから返ってくるファイルを画面に読み込ませることができれば正直cfに並べたsnippetを使う必要はないと思う(cfの内容もこのcdnからとっているものがほとんどに見えた)。バージョン指定して使いたいなら尚更これだけで良さそう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0