javascript - Chrome developer toolbar -functional clarification? -

i have been using chrome developer toolbar quite long time , yet have questions regarding way displays data :

question #1 why after editing dom (f2) , , adding <<script>alert(1)</script> - doesn't execute alert?

i mean difference make vs :

var script = document.createelement('script'); script.src = "..."; document.getelementsbytagname('head')[0].appendchild(script); 

question #2 why changing value of input , wont reflect new value in panel ?

for example : if server sends input value :

and add 222 :

why doesn't reflect change ? ( vice versa work).

question #3 there way see in pane actual sent html (like view source)? (e.g. if server send < want see < , not <). mean - sometimnes need debug browser got server...

#1 editing script node text content directly

when editing script node in element panel, not call script re compilation/interpretation resulting in alert not being called.

to edit scripts in devtools, go source panel.

#2 editing value web page , seeing result in devtools

value htmlinputelement property before having representation in html string. means if set attribute, set value property. if set value property typing input, or programmatically, won't reflect html string. in form scripting read value property of input, not value attribute.

to see live changes, expand object properties in right part of element panel of devtools.

#3 seeing document source

from browser press ctrl+u , see source.

in devtools, find document source when expanding list of sources in left part of source panel.

you find in network panel if devtools opened @ document download time.