Console Importer-控制台导入器

Console Importer插件是一款方便开发者从 Chrome 控制台导入 JS 和 CSS 资源的工具,使用方法:打开 Chrome devtools 控制台,一个名为 $i 的函数可用于导入 JavaScript 和 CSS 资源

使用方法

打开 Chrome devtools 控制台,一个名为 $i 的函数可用于导入 JavaScript 和 CSS 资源。
$i('jquery')
导入特定版本:
$i('jquery@2')
此外,您可以导入有效的脚本 URL:
$i('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js')
也支持 CSS:
$i('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
导入 ES 模块
ES 模块已在现代浏览器中得到广泛支持。 $i.esm 方法在这种情况下很有用:
d3 = 等待 $i.esm('d3')
或指定一个版本:
d3 = 等待 $i.esm('d3@7')
这种方法的优点是不会向窗口添加全局变量,从而可以更好地控制副作用的范围。有关详细信息,请参阅 https://esm.run。
故障排除
问:$i 没有按预期工作
某些网站(例如 Google Inbox)已经将 $i 用作全局变量。此扩展不会覆盖它。
您可以在这些网站上使用 console.$i。
Q: $i 导入资源失败
在 GitHub 等一些网站上,$i 将无法导入资源。控制台错误可能如下所示:
# js 错误示例
拒绝连接到“https://api.cdnjs.com/libraries?search=jquery”,因为它违反了以下内容安全策略指令:
# CSS 错误示例
拒绝加载样式表“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”,因为它违反了以下内容安全策略指令:
这是因为这些网站有严格的内容安全政策。有关详细信息,请参阅内容安全策略 (CSP) wiki
它是如何工作的?
如果它像一个 JavaScript 库名称,如 jquery,请尝试从 cdnjs 加载它
如果它有版本号,比如 jquery@2,尝试从 unpkg 加载它
如果是有效的 URL(CSS 或 JS),直接加载
对于高级使用,还有两个函数 $i.unpkg 和 $i.cdnjs 可用于从特定 CDN 导入资源。
Console Importer-控制台导入器插图

插件安装说明

1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点,在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况,可以将crx文件右键,然后选择【管理员取得所有权】,再尝试重新安装
5、安装好后即可使用

Console Importer下载地址
Console Importer-控制台导入器插图2
©下载资源版权归作者所有;本站所有资源均来源于网络,仅供学习使用,请支持正版!

发表评论