在浏览器控制台中导入或需要任何库

Question

虽然大部分时间都在调试应用程序，但我觉得如果我可以将任何库包含到浏览器控制台中并尝试该库中的一些功能会更容易。

现在在现代javascript/es6/es6/typescript 世界中，有什么东西可以快速将脚本导入浏览器，以便直接使用

示例

在调试时，如果我想要 Observable 我应该能够做这样的事情

import {Observable} from 'rxjs/Observable';  //typescript way
const Observable= require('rxjs/Observable'); // require way

但这些都不起作用。

已经探索过dynamic <script> tag

我已经探索了动态使用 <script> 标签的旧方法，如下所示，但它对于大量库来说很困难，而且也不优雅

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

Answer 1

某些浏览器 (including Chrome) 可以在控制台中使用 sn-ps，作为内置功能或扩展。

执行此操作的单行脚本是

document.head.appendChild(Object.assign(
    document.createElement('script'),
    { src: '...' }
));

考虑到大多数网站已经加载了 jQuery（即使没有，这可以通过浏览器扩展来处理，例如 Chrome jQuery Injector），它可以缩短为：

$.getScript('...');

任何应该在控制台中始终可用的代码也可以通过用户脚本（Chrome 中的 Tampermonkey 等）公开为全局函数，但用户脚本安全性会施加一些限制。

这可能可以通过 dynamic import() 实现，目前是第 3 阶段提案，尚未在浏览器中实现。

---

适用于大多数主要图书馆的合适解决方案是导航到图书馆官方网站并打开控制台。由于网站经常提供实时示例，因此相关变量暴露在全局范围内。已知的例子是$ 代表jQuery，angular 代表AngularJS，ng 代表Angular，Rx 代表RxJS，moment 代表Moment.js...