Run javascript file from workspace in Chrome developer tools

Question

Is it possible to run the newly created JavaScript file in the local workspace in the Chrome console?

The workflow that I am trying to achieve is shown in this image:

I want to be able to create a new file in my workspace, run (or require, or something else) the file and be able to use its functions and variables in the Chrome developer console.

If I'm right, does this mean running a script in the context of a web page and adding methods and variables to the window object?

Can this be done?

Answer 1

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

• Open your local workspace and file.
• Press CTRL + a (Select All)
• Press CTRL + SHIFT + e (alternative: right-click the selected text and select "Rate in console")

Well, this is not much better than copy and paste, but saves a few keystrokes / mouse clicks.

Answer 2

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

For example, if you have 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 this method from the console to load javascript files.

Answer 3

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

Then you can get all your methods in the developer console.