怎么看html5_HTML5代码调试与浏览器开发者工具使用

直接结论： 浏览器开发人员是调试 HTML5 代码的最有效工具。

主要选项： 右键查看，F1 2 或Ctrl+Shift+I，就会打开菜单。

表格元素： 定位元素，双击进行编辑，然后关闭标签。

样式表： 管理规则、更改 CSS 值和设备模拟器。

控制台板： 检查错误和console.log 测试。

表格来源： 断点调试，数据存储查看。

常见问题解答： 检查结束标签、属性拼写、CSS 优先级。

提高效率： 多用途、跨浏览器测试。

真的： 熟练使用工具可以节省时间和精力。

如何审查网页元素

让我告诉您有关此网站组件审查的信息。
我以前就经历过这个陷阱。
去年，我帮助邻居小王创建了他的电子商务网站，试图获取一些产品信息。
他的网站太漂亮了，连我这样的老人都感到困惑。
您认为该网站元素是如何评估的？
我想知道是否应该使用浏览器附带的工具。
我当时手头正好有Chrome，于是我打开Chrome，访问了他的网站。
别告诉我，这个Chrome真的很好用。

然后我按照他教我的方法，右键单击网站上的空白区域并选择“检查”。
万岁，立即弹出一个面板。
当时我的手在颤抖，所以我按错了，选择了“检查选择”，然后关闭它并重新开始。
小王在那里很高兴，说这个东西很好用。

进入“元素”面板后，我看着屏幕前面，指着产品图片说，“看这个图片，我想抓取链接。
”我移动鼠标并单击图像。
哦，你猜怎么着？面板立即跳转到相应的HTML代码。
小王瞪大了眼睛，道：“你怎么知道哥哥在这里？”我说：“嘿，这是一个评论，无论你在哪里做，它都会告诉你代码在哪里。
然后如果你想复制代码，只要点击那个代码，右键单击“复制元素”，然后点击它，代码就会在你的剪贴板上。
小王立即尝试，它确实复制了。
他还问我，“我可以更改代码吗？”我说：“可以，但这次，关闭网站后就会恢复。
”他尝试更改代码“密码”输入框输入“文本”，密码立刻出现了，小王很高兴：“这比我自己写代码还快！”他说：“兄弟，我什么都看不懂。
”我看代码很密。
”我说：“你不用看懂，找相似点就行了。
”你以为这个产品和那个产品都是同一个模板吗？如果你拿到了那个模板，你就可以拿走所有的产品了。
他说：“兄弟，你很擅长这个！”
我微笑着说：“嘿，这是为了审查网站的部分内容。
”用多了就会习惯了。
”你看，很简单，用浏览器自带的工具就可以解决很多问题。

chrome如何找到网页元素在html文档中的位置？

我记得有一次，我正在做一个网页重建项目。
该页面非常复杂，多个嵌套的 div 标签让我感到惊讶。
我修改了某个按钮的样式，但在 HTML 文档中找不到它的确切位置。
我按照上面的步骤操作，打开Chrome的开发者工具，选择“Elements”选项卡，然后右键单击页面上的空白区域并选择“Inspect”。
我单击该按钮，它立即在开发人员工具中突出显示，我复制了它的 XPath 选择器，以便可以在 HTML 代码中轻松找到它。
时间大概是去年1 0月，项目地点是在一家创业公司的办公室。
等等，还有一件事。
我突然想到，如果页面动态加载内容，请记住重新加载页面并重新定位它。