Live edit for javascript not working in WebStorm - javascript

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.

Related

Debugging JavaScript inserted later in the page

I want to debug an issue in my JavaScript code. However I don't have access to the source at the moment, but I want to debug it in my browser now.
The JavaScript piece of code I want to debug is in a view, added later to the page (.NET Core .cshtml view).
I can see that in the Elements tab in my browser, but not in the Source, so I can add breakpoints.
Is there a way for me to "search" for that code in the Source tab or to add a breakpoint through the Elements tab in the browser?

When pressing a button on a webpage loads a new URL in Google Chrome

At the following web address: https://www.sky.com/new-search/chernobyl?q=chernobyl is a button called Episodes. I have determined from Google Chrome developer tools, that this is represented by:
<button role="tab" type="button" id="tabs-id_2474-link-1" class="c-tabs__link" aria-selected="false" aria-controls="tabs-id_2474-article-1" data-test-id="episodes-tab-button">Episodes</button>
...I've also managed to find from the 'Sources' tab of dev tools that the Javascript for mouse clicks is webpack:///./src/builders/click.js?388e.
The effect of pressing the Episodes button is that the URL of the page changes from https://www.sky.com/new-search/chernobyl?q=chernobyl to https://www.sky.com/new-search/chernobyl/episodes/season-1/episode-0?q=chernobyl and the page changes to show episodes from the series and a synopsis for that episode.
The bit I am missing though, is now does the mouse click Javascript trigger the loading of this second URL? I need to be able to capture somehow the new URL, or even better the full source code for the second URL...
Any ideas?
Client-side applications can basically do whatever they want, in terms of navigation. There is no standard mechanism, outside of a normal link <a>.
What they're probably doing is updating the existing page, and updating the URL to retain the state. That is, when you click the button, their code goes off and fetches some data from the server, then creates elements on the page based on that data. The actual original HTML page (and context) stays the same, but it can be modified with fresh data. The URL can be updated with the History API.
If you know something about the web application you're trying to inspect, you can write code for it specifically. For example, if you know that the application always fetches data from https://api.example.com/some-data, then you can skip the whole web page ordeal and hit the API directly.
If you need a more generic solution, the only thing you can really do is run a whole browser engine, through Chromium Embedded Framework or similar. This allows the web application to run as it normally would. Then, on URL change, you can inspect the DOM with your own code.

Cordova: page empty when coming back from external link

When accessing an external page from a Cordova app, then coming back to app with back-button, the app page is empty, or more precisely, everything that was dynamically added to the page is gone.
This seems to be the case whether the link is a native <a href="..."> or is accessed via window.open(), or via cordova.InAppBrowser.open(). The only way it does not happen is when the actual browser is specified via "_system" parameter.
Is there a way to prevent this, or is it normal behaviour ? Should I simply rebuild the dynamic page upon returning ? I could do that, but no event seems to be fired on return, not even a pageshow.
Navigating back refreshes (reloads) the page...so anything dynamically added to the page will correctly be gone. You could use hash tags on the URL for simple information or localStorage for more complex information about the page state and re-populate the page based on it when it reloads.
pageshow most like isn't firing because of some assumption being made in the JS code. Try listening to the $(document).ready for debugging purposes. It could also be caused by the issue described here (because of caching): 'pageshow' is not received when pressing "back" button on Safari on *IPad"
Specifying system causes the page to open in a new window...so that's

How can I make live changes to Javascript in chrome webdeveloper tool?

I am trying to figure out how I can make a change to javascript and then reload the page with the new javascript changes in the same way you can change CSS and html on the fly. I understand that the javascript will need to actually reload the page, but the problem is once you reload it redownloads the original javascript on the server.
So how can I modify the javascript on the fly so that I can test the design with the new javascript changes without having to upload it to the server?
Perhaps you're wanting to use the LiveEdit feature in Chrome? Using it is as simple as opening the Developer Tools, go to the Sources panel, and use the Ctrl/Cmd + Shift + O to find the script you want to edit. Then click the pause button to pause debugging, modify the script as needed, then Ctrl/Cmd + S to save your modifications, and finally click the pause/resume button to resume execution.

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.

Categories

Resources