从 chrome 开发者工具的工作区运行 javascript 文件
[英]Run javascript file from the workspace in chrome developer tools
问题描述
Is it possible to run a newly created JavaScript file in a local workspace in the chrome developer tools console?
是否可以在 chrome 开发人员工具控制台的本地工作区中运行新创建的 JavaScript 文件？
The workflow I'm trying to achieve is the one shown in this image:我试图实现的工作流程是这张图片中显示的工作流程：
I want to be able to create a new file in my workspace, run (or require or whatever) the file and be able to use it's functions and variables in the chrome developer console.我希望能够在我的工作区中创建一个新文件，运行（或需要或其他）该文件，并能够在 chrome 开发人员控制台中使用它的函数和变量。
If I'm correct, this means running the script within the context of the webpage and adding the methods and variables to the window object?如果我是正确的，这意味着在网页上下文中运行脚本并将方法和变量添加到 window object？
Is their a way this can be done?他们有办法做到这一点吗？
4 个解决方案
解决方案1
4 2015-10-02 12:04:34
I could not find a automatic way to add a local file into the DOM context. 我找不到将本地文件添加到DOM上下文的自动方法。 The best solution I found so far: 到目前为止我找到的最佳解决方案：
- Open your local workspace and the right file 打开本地工作区和正确的文件
- Press CTRL + a (Select all) 按CTRL + a（全选）
- Press CTRL + SHIFT + e (alternative: Right click with the mouse on the selected text and click on "Evaluate in Console") 按CTRL + SHIFT + e（替代方法：在所选文本上单击鼠标右键，然后单击“在控制台中评估”）
Well, this is not much better than copy&paste but spares a few key presses/mouse clicks. 嗯，这并不比复制和粘贴好多少，但可以省去几次按键/鼠标点击。
解决方案2
0 2015-01-15 08:51:34
You can define a method in your page to dynamically add javascript to the page and then call it from the console. 您可以在页面中定义一个方法，以便动态地将javascript添加到页面，然后从控制台调用它。
For example if you had a method like this: 例如，如果您有这样的方法：
function loadJs(filename) { var tag=document.createElement('script'); tag.setAttribute("type","text/javascript"); tag.setAttribute("src", filename); document.getElementsByTagName("head")[0].appendChild(tag); }
then you can use that method from the console to load your javascript files. 然后你可以从控制台使用该方法来加载你的javascript文件。
解决方案3
0 2015-01-15 08:57:00
You can create a plain html file like this with your javascript file in the script tag. 您可以使用脚本标记中的javascript文件创建这样的普通html文件。
Then you should be able to get all your methods in the developer console. 然后，您应该能够在开发人员控制台中获取所有方法。
解决方案4
0 2022-09-11 13:52:30
As an example: Step 1: we create one folder "TestJS_folder" and it contains two files.例如： 第 1 步：我们创建一个文件夹“TestJS_folder”，它包含两个文件。
- First file is index.html第一个文件是 index.html
- Second file is test.js file.第二个文件是 test.js 文件。
Content of html file can be: html文件的内容可以是：
<html>
<head>
<title>Test JS in Chrome</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
Step 2: Now you can import/open this test.js file in VSCode or any editor.第 2 步：现在您可以在 VSCode 或任何编辑器中导入/打开这个 test.js 文件。 And you can code the js file from IDE and click on index.html, it will open the html file on browser and you can go to Inspect-> console to check the logs based on your use case. And you can code the js file from IDE and click on index.html, it will open the html file on browser and you can go to Inspect-> console to check the logs based on your use case.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.