11

在大多数情况下调试应用程序时，我觉得如果我可以将任何库包含到浏览器控制台中并尝试该库中的一些功能会更容易。

现在在现代javascript/es6/es6/typescript世界中，是否有任何东西可以快速将脚本导入到浏览器中，以便直接用于

例子

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

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();
4

1 回答 1

13

一些浏览器（包括 Chrome）可以在控制台中使用代码片段，作为内置功能或扩展。

执行此操作的单行脚本是

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

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

$.getScript('...');

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

这可能会通过dynamicimport()实现，目前是第 3 阶段的提案，并没有在浏览器中实现。

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

于 2017-09-29T15:46:26.800 回答