草根吧»论坛首页 › 站长综合资源区 › 精品教程 › Discuz!站长如何使用浏览器的F12调试页面？ ...

12 / 2 页下一页

发新帖

查看: 203|回复: 18

Discuz!站长如何使用浏览器的F12调试页面？

1万热度	1万元宝	1万贡献

发消息

发表于 2018-9-27 11:05:40 | 显示全部楼层 |阅读模式

如何使用浏览器的F12调试页面？
一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。
F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (css)，还可以跟踪并查明网页或网络的性能问题。
F12调试页面各个功能分别是什么？

Elements标签页
Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。

Elements标签页的右侧

Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示

Sources标签页
Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。

Audits标签页
这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

Console标签页
就是Javascript控制台了

在控制台中可以直接模拟手机、调整UA、修改网络连接状态。

参考文献
使用 F12 开发人员工具调试 HTML 和 CSS
Chrome调试工具简单介绍

作者：小翼_b998
链接：https://www.jianshu.com/p/c31f8232b553
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

站长, 如何, 使用, 浏览器, 调试

相关帖子

本文来源于网友学习研究交流 www.caogen8.co，请以学习研究交流为主。
如果您没有贡献积分，可以直接免费领取，免费领取
如果你需要加入本学习研究交流，请以学习研究交流为目的，免责声明
如果找不到您要的资源，请搜索一下，点击搜索

回复 <

提现请阅读《贡献值提现说明（申请提现须知）》,恶意提现、积分作弊直接封禁!

热度	元宝	贡献

发消息

发表于 2025-11-10 20:21:25 | 显示全部楼层

看看

回复支持反对

0 热度	1 元宝	0 贡献

发消息

发表于 2025-11-27 14:38:07 | 显示全部楼层

6666666

回复支持反对

0 热度	1 元宝	0 贡献

发消息

发表于 2025-12-6 00:38:57 | 显示全部楼层

我来看看怎么个事儿

回复支持反对

热度	元宝	贡献

发消息

发表于 2025-12-15 16:05:14 | 显示全部楼层

看看

回复支持反对

12 热度	1 元宝	0 贡献

发消息

发表于 2025-12-22 09:16:41 | 显示全部楼层

看看

回复支持反对

热度	元宝	贡献

发消息

发表于 2025-12-25 04:41:08 | 显示全部楼层

支持一下

回复支持反对

热度	元宝	贡献

发消息

发表于 2025-12-27 10:27:01 | 显示全部楼层

支持一下

回复支持反对

143 热度	5 元宝	0 贡献

发消息

发表于 2025-12-28 23:13:13 | 显示全部楼层

看看

回复支持反对

5 热度	62 元宝	20 贡献

发消息

发表于 2025-12-30 05:27:49 | 显示全部楼层

支持一下

回复支持反对

12 / 2 页下一页

发新帖

懒得打字嘛，点击右侧快捷回复【最新发布】【赞助草根吧享更多权益】

B Color Image Link Quote Code Smilies

您需要登录后才可以回帖登录 | 立即注册

本版积分规则回帖后跳转到最后一页

收藏帖子 返回列表 搜索

关注微信

个人中心

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

小黑屋|手机版|草根吧

快速回复 返回顶部 返回列表