Импортировать или требовать любую библиотеку в консоли браузера

Question

При отладке приложения большую часть времени я чувствую, что было бы легче, если бы я мог включить любую библиотеку в консоль браузера и попробовать некоторые функции из этой библиотеки.

Сейчас в современном 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();

Answer 1

Некоторые браузеры ( включая Chrome) могут использовать фрагменты в консоли как встроенные функции или расширения.

Однострочный скрипт для этого

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

Учитывая, что большинство веб-сайтов уже загрузили jQuery (даже если они этого не делают, это может быть обработано расширениями браузера, такими как Chrome jQuery Injector), его можно сократить до:

$.getScript('...');

Любой фрагмент кода, который всегда должен быть доступен в консоли, также может быть представлен как глобальная функция с пользовательскими сценариями (Tampermonkey в Chrome и т. Д.) С некоторыми ограничениями, налагаемыми безопасностью пользовательских сценариев.

Это, вероятно, будет возможно с динамическимimport(), который в настоящее время является предложением стадии 3 и не реализован в браузерах.

---

Подходящее решение, которое подходит для большинства основных библиотек, с которыми может быть интересно поэкспериментировать, - перейти на официальный веб-сайт библиотеки и открыть консоль. Из-за того, что веб-сайты часто предоставляют живые примеры, соответствующие переменные становятся доступными для всего мира. Известные примеры $ для jQuery, angular для AngularJS, ng для угловых, Rx для RxJS, moment для Moment.js...