Chrome开发人员工具栏功能澄清？

Question

我一直在使用chrome开发人员工具栏很长一段时间，但我对它显示数据的方式有疑问：

问题＃1 为什么在编辑dom（ F2 ）并添加<<script>alert(1)</script>之后 - 它没有执行警报？

我的意思是它与vs有什么区别：

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

问题＃2 为什么更改输入的值，不会反映面板中的新值？

例如：如果服务器发送带有值的输入：

然后我添加222：

为什么它不反映变化？ （反之亦然）。

问题＃3 有没有办法在该窗格中看到 实际已发送 html（如视图来源）？ （例如，如果服务器发送<我希望看到<而不是<）。我的意思是 - 我需要调试浏览器实际从服务器获取的内容...

Answer 1

＃1直接编辑脚本节点文本内容

在“元素”面板中编辑脚本节点时，它不会调用脚本重新编译/解释，从而导致警报未被调用。

要编辑devTools中的脚本，请转到源面板。

＃2从网页编辑值并在devTools中查看结果

value是HTMLInputElement属性，在其HTML字符串中表示之前。这意味着如果设置属性，它将设置value属性。但是，如果通过键入输入或以编程方式设置value属性，它将不会反映到HTML字符串中。在表单脚本中，您将读取输入的value属性，而不是其value属性。

要查看实时更改，请展开devTools元素面板右侧的对象属性。

＃3查看文档来源

在浏览器中按ctrl + u并查看来源。

在devTools中，您可以在“源”面板的左侧部分展开源列表时找到文档源。

如果在文档下载时打开devTools，您也可以在“网络”面板中找到它。