How can I feed an HTML document to WebStorm for processing

I'm interested in using WebStorm for teaching students how to navigate around an HTML document and to be able to develop userscripts that can be applied to websites.

For development/debugging purposes, I'd like to be able to "load" an HTML document as the "target", if you will, of the Javascript code being written in Webstorm such that when you start your program in debug mode, that HTML document will be available as a DOM that can be accessed.

Is there a way to do this? I don't want to embed HTML in the Javascript code as I want to be able to use that code with any HTML.

David Jameson

Comment actions Permalink

Haven't got what you mean, sorry. If you can explain how you do it outside of WebStorm, I would probably suggest a way to do this in WebStorm

Comment actions Permalink

I'd like to pass a command line argument into WebStorm when I "debug" a Javascript program that can be retrieved by the running program. That command line argument would be the name of a (normally local) file containing HTML. I would then like to be able to load that HTML file so that my Javascript program can navigate it, traverse its elements, etc.
I'm not a Javascript expert but I know that if I load an HTML file into a web browser, any embedded or linked Javascript code can refer to a variable called 'document' so that one can write things like

    e = document.GetElementById(....)

so the question is, how do I get access to a 'document' object representing that HTML code when I'm running standalone Javascript through WebStorm?

Comment actions Permalink

'standalone' javascript is run via Node.js. Node.js can't execute HTML files and doesn't know what 'document' is - 'document' is only defined when running HTML page in browser. And I don't understand what this has to do with WebStorm... It is not WebStorm that runs your application

Comment actions Permalink

I'm not trying to "execute" HTML code --- I don't even know what that means. HTML is just data.

As I said, I'm not a Javascript expert but I assume that there must be a way for Javascript to load in an HTML file (as data) such that there is now a Javascript object that can be traversed using all the DOM stuff.

I want to be able to experiment with doing that using WebStorm as the debugging IDE (WebStorm is a damn nice environment) so I can later (if it works out) have my students use this approach.

I realize totally that WebStorm is not "running" the application but rather just interfacing with the process so as to allow breakpoints, variable inspection and so forth.

So, yeah,  I was asking a Javascript question, not a WebStorm question, but this just came up in the context of my starting to look at WebStorm as a potential environment at my university.

Comment actions Permalink

I think the confusion comes into play with your current understanding of Markup ( HTML ) vs Scripting ( JavaScript ).

HTML is a markup language.  It is used to organise text in a particular way, and is static.  Basically - it creates structure to the page, so the browser does not present a giant wall of text.  CSS then styles the text.

JavaScript is a client-side ( user's browser ) scripting language.  It is not a program.  However, JS can dynamically alter markup.  The scripts will only run, when the browser executes, or parses, them.  The only way to step through JS, that I am aware of, is to use a complex solution like Node.js or to use the free DevTools, provide by the most popular, modern browsers.  These tools can be accessed ( usually ) by hitting F12.  You can see all that is happening, in real-time, with the page.

See: MDN: Debugging JavaScript for more information.

Hope that helps.


Comment actions Permalink

Actually, the confusion is due to my poorly asking the original question, I've been sloppy with my language. Conceptually, I understand  HTML and Javascript  deeply (for what it's worth, I was writing SGML (at IBM) years before HTML/XML showed up and I've written several compilers and scripting languages in my time). However, I've never really bothered with Javascript in any depth as I've never really liked it and I generally view HTML as something to be generated from a higher level language and never manually tweaked.  (Don't even get me started on CSS :-)

I understand totally that after pulling down HTML the browser creates a tree (DOM) stored in an object called document (or maybe a document array, I don't remember/don't care at this point) that can then be examined/traversed/modified by Javascript code (that's also generally pulled down) etc.

The thing is, I downloaded/installed WebStorm, having used several JetBrains tools before, and noted very quickly that I could write a Javascript program with it and then step through it line by line, inspect variables and so forth.That process is much more efficient than throwing Javascript into a remote file (inside HTML), pulling it down with Firefox (say) and using things like Firebug to step through the code, particularly since by using WebStorm, I can essentially do REPL.

So having discovered that WebStorm does let me do this, the next thing I wanted to do was bind some HTML code to a Javascript object, essentially SIMULATING what a browser does, so that when I step through the Javascript code, using WebStorm, I would be able to examine the HTML tree.

I didn't know if Javascript had some functions for reading in HTML files and creating the tree or whether I somehow needed to get WebStorm to do that initial work, i.e. simulating what the browser did.

Does that make sense?

I guess I should have just gone off and looked up "loading HTML files in Javascript" but at the time it seemed easier to ask the question on this forum --- but perhaps not  :-)


EDIT:  If in fact it is not possible to load in an HTML file from Javascript, then Webstorm should really provide a mechanism to do this and make the created document object be automatically available to Javascript code.

EDIT2: Personally, I'm far more interested in using Javascript as a target language for high level languages such as Haskell or within an environment like Morfik but as a means to introduce students to Javascript and basic web development, WebStorm seems like just the right thing.

Comment actions Permalink

OK --- figured it out --- pretty trivial once one knows how ---- required some debugging to get on the right tracl so thanks, WebStorm, right from the start. I didn't even have to mess with asynchronous stuff with callback --- this is standard blocking code, exactly what I wanted.

Here's an example that can load an HTML document from a file, produce a DOM which you can examine.

var fs = require('fs');
var jsdom = require("jsdom").jsdom;
var markup = fs.readFileSync('/Volumes/External1/src/Javascript/foo.html');
var doc = jsdom(markup, {});

var textContent = doc.getElementById("abc").textContent;


Some comments

jsdom has to be installed - here's the info for it

You need to use io.js rather than node.js


Please sign in to leave a comment.