CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtools
Royi Namir
Royi Namir

Reputation: 148744

Chrome developer toolbar -functional clarification?

I have been using chrome developer toolbar quite for a long time , yet I have questions regarding the way it displays data :

Question #1 Why does after editing the dom (F2) , and adding <<script>alert(1)</script> - it doesn't execute the alert?

enter image description here

I mean what difference does it make vs : 

var script = document.createElement('script');
script.src = "...";
document.getElementsByTagName('head')[0].appendChild(script);

Question #2 Why does changing the value of an input , wont reflect the new value in the panel ?

for example : if the server sends an input with a value :

enter image description here

and then I add 222 :

enter image description here

Why it doesn't reflect the change ? ( vice versa DOES work).

Question #3 Is there any way to see in that pane the actual sent html (like the view source)? (e.g. if the server send &lt; I want to see &lt; and not <). I mean - sometimnes I need to debug what the browser actually got from the server...

Upvotes: 0

Views: 102

Answers (1)

atondelier
atondelier

Reputation: 2434

#1 Editing a script node text content directly

When editing a script node in Element panel, it do not call script re compilation/interpretation thus resulting in your alert not being called.

To edit scripts in devTools, go to source panel.

#2 Editing a value from the web page and seeing the result in the devTools

value is an HTMLInputElement property before having its representation in its HTML string. That means that if you set the attribute, it will set the value property. But if you set the value property by typing into the input, or programmatically, it won't reflect into the HTML string. In form scripting you will read the value property of an input, not its value attribute.

To see the live changes, expand the Object properties in the right part of the Element panel of the devTools.

#3 Seeing document source

From the browser press ctrl+u and see the source.

In devTools, you will find the document source when expanding the list of sources in the left part of the Source panel.

You will also find it in the Network panel if devTools were opened at document download time.

Upvotes: 2

Related Questions