2

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?

Brad
  • 159,648
  • 54
  • 349
  • 530
THOMAS CODY
  • 51
  • 1
  • 2
  • 1
    It would be best to carry out that type of thing in a debugging session. After all, its likely you want to see the affect of the edit right? You can see that realtime in the debugger. Alternatively, run it from the console instead. – Randy Casburn Dec 04 '18 at 20:00
  • You mean you edit the JavaScript code in the source view? – epascarello Dec 04 '18 at 20:00
  • 1
    JavaScript runs when the page loads. If you make a change using the page inspector, the page is partially re-rendered, but is not fully reloaded, so the code does not get executed. Also, HTML doesn't "run", it is rendered by the browser. – Herohtar Dec 04 '18 at 20:02
  • 2
    I don't know why anyone is downvoting this question... it's a perfectly valid question! – Brad Dec 04 '18 at 20:11
  • how do i run it from the console – THOMAS CODY Dec 05 '18 at 00:49

2 Answers2

4

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!

Brad
  • 159,648
  • 54
  • 349
  • 530
  • can you clarify the developer tools because i really need some JavaScript edits so i can help my friend fix his project but i cant because it doesn't work – THOMAS CODY Dec 05 '18 at 01:17
  • @THOMASCODY You want to remotely collaborate with your friend? Use version control, like Git. – Brad Dec 05 '18 at 02:17
  • Its more of a security consulting of his site and wants to see if I can get in and how i can fix it so I wanna use the inspect element to show him how easy it is. But my java wont run – THOMAS CODY Dec 06 '18 at 16:04
  • @THOMASCODY Anything client-side can be manipulated. Just use the JS console. Also, JavaScript has absolutely nothing to do with Java. – Brad Dec 06 '18 at 16:13
3

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.

Fleming Slone
  • 181
  • 16