Editing JavaScript with inspect element - javascript

Why is that when I edit the HTML in inspect element it will run immediately but when i edit the JavaScript it doesn't run? Are there any solutions?

When you use your browser's developer tools (via inspect element, in your case) to edit the page, you're not actually editing HTML, you're editing the live current state of the DOM tree.
When your site first loads, your HTML is parsed, and a tree of elements is built up. This is added to a Document, which is then rendered for you in the browser's viewport. As soon as that HTML is parsed, it essentially ceases to exist. When you open your developer tools, HTML is re-generated from the current DOM and displayed to you. This is for human convenience.
It's important to make this distinction, as it helps explain the difference between the way HTML and JavaScript are handled.
For JavaScript, it is parsed as soon as your browser hits the appropriate <script> tag. This code is shipped off to the JavaScript engine for parsing and execution. Unlike the browser developer tools for inspecting the DOM as HTML, there isn't really a way to poke inside the JavaScript engine to recreate a JS code representation of the currently running context. (The profiler is the closest thing to this.) Therefore, there isn't any equivalent view to live-edit the JavaScript.
However!... Some browsers such as Chrome have a feature that allows them to hot-reload content from disk, including HTML and JavaScript. This is actually directly integrated in your browser's developer tools under Sources. If you go there and add a local directory, it will allow you to edit these files. As you edit them, Chrome will reload them without reloading the whole page. If you happen to have code referencing functions in a file external to the HTML, then that code will be replaced with the new functions in the new file. It's also good to note that you can edit this JavaScript in an external editor and get the same functionality.
Just to be clear, this hot-reload functionality only works locally, and is completely different than editing the DOM with inspect element.
Please add comments if you need any clarifications!

The difference lies in the difference between HTML and JavaScript. HTML is a markup language that is used to display the content on the page, so any change made to that markup will immediately be reflected because you are changing the underlying structure of the page.
JavaScript, on the other hand, primarily executes when the page is loaded and then it's done unless you've attached event handlers for click events, etc. Editing the JavaScript on a live page doesn't change anything because the code has already been run.
You can find more answers about when JavaScript is executed and the differences on this question: When does the browser execute Javascript? How does the execution cursor move?
If that doesn't answer your question post a code sample and I'll see if I can help you further.

Related

Ajax.Updater fetched content not shown in browser debugger

I am newly working on a fairly old system, which uses ColdFusion if it matters. In various places, it uses Ajax.Updater for server requests which return new HTML (.cfm) fragments to update the specified element with. This HTML also includes JavaScript via <script>'s and inline event handlers, ie. <button onclick=...
The question is how can I go about debugging this code?
HTML (and .cfm) documents typically show up in the sources tab and can be debugged like normal JS, but in both Chrome and Firefox, the fetched HTML is not showing up. I can clearly see the new html being fetched in the network tab, the new elements are rendered and appear in the elements tab, and the actual JavaScript is clearly running as expected; it just doesn't show up in the debugger.
Does fetched code simply never go to the debugger? Is it because the fetched html is a fragment? Is there some other known way to debug code from Ajax requested HTML?

Chrome: How can I find the javascript that's rendering a particular DOM element?

I'm trying to debug an issue on a single page web app that is rendered using javascript. I'm mostly unfamiliar with how the page was built.
Is there a way that I can detect how a particular element is being rendered, or at least when it's being added to the page?
I'd like to set a break point for when the item is created or added to the DOM, or first rendered in the page.
I'm open to any solutions that preferably work in Chrome, like the Chrome Developer Tools, or a debugging bookmarklet, etc.

How to tell what js function is creating an element with Firefox DevTools

I have a page with so many elements I dont need but I cant remove them because I dont see them in the html templates so I assume javascript is creating them at some point.
I would like to use Firefox developer tools to detect which functions are doing that in order to stop the page from creating those elements. What should I do? I use Firefox 53.0.3
Thank you.
First of all, you should verify whether the HTML is really added via JavaScript or it's already part of the page source.
To do that, right-click the page and choose View Page Source from the context menu or press Ctrl+U. In the source view search for the element, e.g. via its ID or its contents.
If you find it, it is obviously added within the server-side script, so you need to check there where it's added. If you cannot find it, it's added via JavaScript.
If the element is added by a specific action you do on the page, you can use Firebug's feature called Break on Child Addition or Removal, which allows to stop the JavaScript execution at the line where the change happened. To do so, right-click the parent of the element and choose the above option from the context menu.
A second way to find out where the HTML is added is by setting an event breakpoint for the load event. To do that, switch to the Events side panel, right-click the load event handler and choose Set breakpoint from the context menu:
Then reload the page. The script execution will stop at the related line. Starting from there, you need to step through the code until you reach the line where the element is added.
Having said that, Firebug is officially discontinued in favor of the Firefox Developer Tools and Firebug's Script panel doesn't work anymore in current versions of Firefox. (Also the option to set the breakpoint is missing.) Unfortunately, the Firefox DevTools are currently (as of Firefox 54.0) still missing the feature to break on DOM changes. There is already a bug report for it, though.
Having said that, the second option to stop at the page load is also available there. To do so, switch to the Debugger panel. In there click the button to expand the side panels (), then switch to the Events side panel. There you need to check the load event listener:
Then follow the steps as described above, stepping through the code until you reach the line where the element is added.

Userscript Functionality Control Outside DOM

This is an extension of Brock Adams answer regarding the detection of userscripts by web administrators. Found here: link
What I'm going to discuss is hypothetical, as obviously avocation of this is not likely good behaviour.
Now. Userscripts in browser games. Let's take any browser game such as Neopets.
If you build a big fancy script to automate processes on any given neopets page, you likely need a control menu to activate various functions. One may use a floating iframe, or just add buttons on the page itself and hook them all up in the userscript.
The issue with this is that you're still changing the page itself, through addition or modification. Any administrator looking for scripts can check for triggered DOM manipulation events, could count iframe/input tags, etc.
My question is therefore, to minimize detection by administrators, how can you control different functions of a userscript running on a page without elements being added to the page itself (DOM)?

firefox view source code

I noticed that the source code shown in Firefox appears to be incomplete. I have the latest version. When using the Firebug plugin to look at a webpage, I am able to find elements which are simply not recognized by Firefox.
This is for a automated script I am working on.
I am wondering several things:
Why is a firefox plugin able to recognize elements Firefox is not?
Is there a way to pass the source from Firebug engine to Firefox, or any other viable workaround which would enable Firefox to recognize all of the elements on the page?
My guess is that these "hidden" elements have been created by javascript after the page load, but I'm not really sure.
I'd say Firebug is displaying what's in the DOM (i.e. what is in the page at the instant you are looking at it), while View Source is displaing the source that has been received from the server (i.e. what is in the page at the first instant it's displayed).
If you want to see the "source" from the DOM, maybe the Web Developper Toolbar Extension can help : from what I remember, it provides a "view generated source" option.
For No.2
Open Any Page, and Press Ctrl+A or Select All, and right click, click View Selection Source, You should able to see any html nodes as you see in Firebug.
Your guess is correct. "View source" reveals exactly what the server has passed down to the client. What Firebug shows you is the "rendered source code", which is taking the current DOM state, and rendering it back into a HTML representation, that may or may not look very much like the actual HTML code written.
Your question is unclear.
The View Source command displays the raw HTML that was downloaded from the server.
Firebug's HTML tab shows the elements that are currently on the page.
Any changes made by Javascript will show up in Firebug (which gives a live view), but not in View Source. (Because they weren't in the HTML that was downloaded from the server)
Firefox's View Selection Source command, which appears only when some text is selected, shows the live source from the DOM and should show exactly what you see in Firebug. (Except that it won't update after you click it, so if the DOM changes again, you'll need to click it again to see the change)
To see the source for the entire page, you can press Ctrl+A, then right-click and click View Selection Source.
If theis doesn't answer your question, please elaborate.
Firefox shows the source code as it comes from the server, any alterations to it via JavaScript will not show up. Firebug keeps track of the changes to the document and updates the source code.
Doing Ctrl-U or View | Source will just give you the static HTML document that is returned by the server.
What you probably want to look at - and what you are seeing in Firebug - is the rendered DOM. If you install a Firefox addin such as Web Developer you will be able to view the rendered DOM - i.e. the HTML dynamically rendered in javascript and the actual document the renders in the browser.

Categories

Resources