Develop Reference

Live edit for javascript not working in WebStorm

I have followed the instructions for debugging with javascript in webstorm:
The native "Live Edit" plugin is enabled
Live update "Javascript, HTML and CSS" in the "Live Edit" settings.
Restart if hot swap fails
Then, I debug the current html file by clicking Debug in the right-click context menu.
This works for refreshing HTML and CSS content without reloading, but changes in Javascript are not reflected 😱.
How can I live edit Javascript in Webstorm? Other answers here on SO are all about the deprecated chrome extension.

JavaScript 'live editing' is supported, but the behavior is different for external and embedded code. Changes in embedded JavaScript always cause immediate page reloading, so the page updating is instant; whereas changes in 'external' javascript (linked via <script src="path/to/file.js") are hotswapped: new code is loaded to the browser instantly, but the results of the change will be visible only when you do something to trigger this new code. For example if you change the onClick handler and write new text in alert(), you will see the new text after the click without reloading the page. Same for functions triggered by timer, for example. But if the JavaScript code is executed only on page load (and not on certain event), you have to manually reload the page to see the results - Live Edit doesn't force new code execution, it changes the code and not application state.

why does the html div not change even though the JS inserting content into the div has changed (and view source shows new JS)?

edit:
I've isolated the problem to the JS lib's use of local storage, which on a browser refresh restores the content from local storage wiping out new content changes (fine for production but not dev); original problem is stated below.
The problem:
I'm working on a html file and a JS file; the JS inserts content into the html div. I change what the JS file inserts and refresh the html, but the browser page div doesn't change. However, when I look at the page source and open the JS file from there, I do see the changes I made to the JS.
So it seems like the browser is loading the new JS. But the content div doesn't change.
Here is the JS, http://pastebin.com/NteJmUPz
And here is the html, http://pastebin.com/G8EBdAbQ
What I've tried:
I've tried emptying the cache, turning off cache in Chrome dev tools, hard refresh and clear cache in Chrome while dev tools is open, etcetera. Behavior is the same in Chrome and FF.
Even closing and reopening the browser (FF) doesn't work to show the new changes.
What works:
The one thing that does seem to show new changes is opening a new incognito tab in Chrome. But then I'm back to the same behavior and need to close and open the incognito tab to show changes.

Can I preview the line of JavaScript code that is executed on Firebug?

Lets say for example that I have a button and when I click on it a modal dialog opens on the screen, or I have a vertical navigation and when I click on an item, it shows all the sub-items of this one.
I was wondering if it's possible to preview on Firebug, which lines of code are executed and see the specific code of the JavaScript file?
What I'm looking for is a way of viewing the JS code that is executed in a similar way as Firebug does with CSS (by doing Inspect Element with Firebug on a tag and showing all CSS rules that are applied to this tag).

You can use the Script panel to view and debug your JavaScript code.
There are several ways of how you can debug your code:
Setting a breakpoint
Using the debugger keyword
Using the Break On ... feature
In all these cases the script execution will stop at a specific line, from which you can step through each instruction to debug the code.
How you do that is described in more detail on the Firebug wiki page.

you can debug (see) your js code.
In firebug Script panel is provided where you can select your js and attach debugger wherever you want.

Select of a section of a web page and output all js used there?

Is there an application that allows me to select a section of a web page, and then outputs all js used there? I've been told I can do this with Chrome Inspector, but haven't had any success so far.
Example:
On this page - http://preview.oklerthemes.com/porto/2.7.0/page-left-sidebar.html - there is a tabbed box in the sidebar. I want to easily grab all the JS/CSS needed for that box. I usually use Inspector to look at all the styles, and go and grab theme from each CSS file, but I don't know how to do this for the JS.

It's not quite clear from your question what you're asking.
Are you trying to see what JS causes writes or changes to a particular part of a web page? The easiest way would be to open the page with the element inspector, right-click a particular chunk of HTML and stick a breakpoint on modifications.
The next time a function causes any changes, the breakpoint will trigger and you'll be able to crawl up the call stack to see what the cause was.

Dropping a breakpoint into a Javascript file using Firebug

I'm debugging a Twitter Bootstrap dropdown menu (http://twitter.github.com/bootstrap/javascript.html) which isn't dropping down.
I'm assuming the Javascript isn't running but would like to check. My initial thought was to drop a breakpoint into bootstrap.js somewhere using Firebug. However, I can't see where to do this. If I click on the Script tab I just get a screen showing javascript.html which seems exactly the same as the HTML source code.
Any suggestions?

In the script tab, where you see 'javascript.html', click on it (click on javascript.html) and firebug will give you a popup list of all scripts the page is using. The one you want to debug will likely be found inside the assets folder there.