Run javascript file from the workspace in chrome developer tools

Question

Is it possible to run a newly created JavaScript file in a local workspace in the chrome developer tools console?

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.

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?

Is their a way this can be done?

Ansilme

Not a true answer as you want to test it in a browser, but an alternative to be able to simply test out javascript code is to in fact use Node.js so you can run it outside of a browser and perhaps easily test it out through unit tests. – Sinatra

Not really an option because I want to use the developer tools as my editor :) – Ansilme

Just execute file contents in the console. – Ory

That does not solve my problem. I want to create a workflow where you are able to require/load the file instead of having to copy and paste the entire code in the console. – Ansilme

Answer 1

I could not find an automatic way to add a local file into the DOM context. The best solution I found so far:

• Open your local workspace and the right file
• Press CTRL + a (Select all)
• Press CTRL + SHIFT + e (alternative: Right click with the mouse on the selected text and click on "Evaluate in Console")

Well, this is not much better than copy&paste but spares a few key presses/mouse clicks.

Cathrinecathryn

Reminder for the future: The browser vendors are implementing the ecma2015 module loader, perhaps something like import test from 'file://...' will work in a few month, see for more infos here: developer.mozilla.org/de/docs/Web/JavaScript/Reference/… – Cathrinecathryn

Answer 2

A useful alternative to running a file from the workspace might be to run a snippet:

Sources => >> => Snippets + New snippet

Snippets can also be started with (also supports debugging):

• Ctrl+Enter
• Run button in the footer:

• Command palette: Ctr+O => !{name of snippet}:

Unfortunately, those snippets are not simply stored as files in a preference folder. Therefor, creating a backup of many snippets might be tricky. Single snippets can be exported with "Save as..." option.

Related:

https://developer.chrome.com/docs/devtools/javascript/snippets/

https://youtu.be/zW9ibQbYJNE?feature=shared

Which file does Snippets of Chrome Dev Tool saved at?

Cannot open File as Chrome Snippet

Opportune

Answer 3

You can create a plain html file like this with your javascript file in the script tag.

Then you should be able to get all your methods in the developer console.

Countrydance

This works but it cannot add new js files dynamically – Ansilme

Why would you want to do that? – Countrydance

To be able to create files in the console and use them immediately. – Ansilme

I tried this in jan 2021 and works for me. I wanted to try this to take advantage of breakpoints in chrome – Cacao

Answer 4

You can define a method in your page to dynamically add javascript to the page and then call it from the console.

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.

Overcompensation

This code gives me the following error: load('C:\Users\u0098668\Documents\Projects/local-folder/test.js') Not allowed to load local resource: file:///C:/Users%C2%98668DocumentsProjects/local-folder/test.js. Would it be possible to check the current folders in the workspace for the filename? – Ansilme

maybe try using "file:///C:/Users/u0098668/Documents/Projects/local-folder/test.js" as the path to your js file. – Overcompensation

Or trying putting the file in the same location as your webpage so you can use a relative path to the file, instead of having C: in the path – Overcompensation

Gives me the same error. Does a workspace have a URL? Maybe on localhost which I request to get the file? – Ansilme

It does add the file to my HTML thought, I'm just not allowed to use the resource? – Ansilme

looking at your initial screenshot it looks like you could use a relative path "/local-folder/test.js" – Overcompensation

A relative path queries the current webpage and appends it with this path (e.g. load('/local-folder/test.js') => load.js:5 GET reddit.com/local-folder/test.js ) – Ansilme

Let us continue this discussion in chat. – Ansilme

Answer 5

As an example: Step 1: we create one folder "TestJS_folder" and it contains two files.

1. First file is index.html
2. Second file is test.js file.

Content of html file can be :

<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. 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.

Paraclete