如何在浏览器开发者工具中直接运行本地JS文件？-js教程-PHP中文网

如何在浏览器开发者工具中直接运行本地JS文件？

霞舞

发布： 2025-03-18 10:36:13

原创

953人浏览过

在浏览器开发者工具中直接运行本地js文件，无需构建项目！本文将介绍一种便捷方法，助您快速调试和测试代码。

如何在浏览器开发者工具中直接运行本地JS文件？

挑战： 如何在浏览器开发者工具的Sources面板中直接运行本地JS文件？

直接在Sources面板导入本地JS文件并非浏览器原生功能。Sources面板主要用于调试已加载的脚本。但我们可以利用浏览器控制台的JavaScript能力来实现。

解决方案：利用FileReader读取并执行本地JS文件

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

通过一段JavaScript代码，创建一个文件选择器，选择本地JS文件后，使用FileReader读取文件内容，再通过eval()函数执行代码。

步骤：

在浏览器开发者工具的控制台中，粘贴并运行以下代码：

var input = document.createElement('input');
input.type = 'file';
input.onchange = function(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        eval(e.target.result); // 执行读取到的JS代码
    };
    reader.readAsText(file);
};
input.click();

登录后复制