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

Question

大多数时候，在调试应用程序时，我觉得如果可以将任何库包含在浏览器控制台中并尝试该libraty中的某些功能，它将更加容易。

现在，在现代javascript/es6/es6/typescript世界中，有什么短而快的工具可以立即将脚本导入浏览器，以便可以直接使用

例

调试时，如果我希望可以观察到，则应该可以执行以下操作

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

但是这些都不起作用。

已经探索过的动态<script>代码

我已经探索了使用动态<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

某些浏览器（包括Chrome）可以在控制台中使用摘要，作为内置功能或扩展程序。

单行脚本执行此操作是

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

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

$.getScript('...');

控制台中应始终可用的任何代码段，也可以通过用户脚本（Chrome中的Tampermonkey等）作为全局功能公开，但受用户脚本安全性的限制。

这或许将是可能的动态import()，这是目前阶段3建议并没有在浏览器中实现。

对于大多数主要图书馆来说，一个可能很想快速尝试的合适解决方案是导航到官方图书馆网站并打开控制台。由于网站经常提供实时示例，因此相关变量会暴露在全球范围内。已知实例是$为jQuery的，angular对AngularJS，ng对角，Rx为RxJS，moment为Moment.js ...