使用 F12 开发人员工具调试 HTML 和 CSS
怎样打开Chrome的开发者工具?
你可以直接在页面上点击右键,然后选择审查元素:
或者在Chrome的工具中找到:
或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。
打开的开发者工具就长下面的样子:
不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口:
下面来分别说下每个Tab的作用。
Elements标签页
这个就是查看、编辑页面上的元素,包括HTML和CSS:
左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选"Edit as Html"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。(注:看到上面右键菜单的最后一个选项"审查元素"了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦,嘿嘿)
你还可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处:
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:
你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin神马的):
注意到上面的Properties没有?这个很有用哦,可以让你看到元素具有的方法与属性,比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。
Resources标签页
Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性,你可以直接修改CSS文件,并且修改即时生效哦:
Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。
点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息,对于开发、调试,都是很有用的。
Scripts标签页
很明显,这个标签页就是查看JS文件、调试JS代码的,直接看下图的说明:
还有你可以打开Javascript控制台,做一些其他的查看或者修改:
你甚至还可以为某一XHR请求或者某一事件设置断点:
Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间:
点击底部的Record就可以开始录制页面上执行的内容。(这个不熟悉,请参考文末链接)
Profiles标签页
这个主要是做性能优化的,包括查看CPU执行时间与内存占用:
这个也不熟悉,不多说,还是请参考文末链接吧。
Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow):
点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了:
它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦:
Console标签页
就是Javascript控制台了:
这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行:
怎么样,一目了然了吧 ?再例如我想查看日期函数都有哪些方法:
(注:注意在这里看到的某些方法和属性是ES5新增的,记得兼容其他浏览器的支持情况哦)
结语
Google Chrome除了简洁、快速,现在的Chrome的插件也非常的丰富了。而对于web开发者来说,Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的,而且Chrome的开发者工具我个人认为真的非常好用,这就是为什么我向web开发者推荐使用Chrome的原因。
使用 F12 开发人员工具调试 HTML 和 CSS相关推荐
- F12 开发人员工具调试 HTML 和 CSS
IE调试网页之六:使用 F12 开发人员工具调试 HTML 和 CSS (Windows) F12 开发人员工具可帮助你查找和修复 HTML 和级联样式表 (CSS) 代码中的错误.如果不使用这些工具 ...
- IE调试网页之六:使用 F12 开发人员工具调试 HTML 和 CSS (Windows)
F12 开发人员工具可帮助你查找和修复 HTML 和级联样式表 (CSS) 代码中的错误.如果不使用这些工具,则可能很难在源代码中发现这些错误. 通过在 Windows Internet Explor ...
- 测试人员如何使用浏览器的f12_如何使用 F12 开发人员工具调试网页
本帖最后由 qin明月 于 2013-4-16 16:02 编辑 使用 F12 开发人员工具调试 JavaScript 错误 使用 F12 开发人员工具,Web 开发人员能够在无需离开浏览器的情况下快 ...
- IE调试网页之五:使用 F12 开发人员工具调试 JavaScript 错误 (Windows)
使用 F12 开发人员工具,Web 开发人员能够在无需离开浏览器的情况下快速调试 JavaScript 代码. 通过内置到每个 Windows Internet Explorer 9 安装中,F12 ...
- IE调试网页之一:F12 开发人员工具简介
F12 开发人员工具是可帮助生成和调试网页的一套工具. 编写出色的网页需要编码知识以及适当的工具来发现和调试难免会出现的问题.Windows Internet Explorer 9 提供所呈现代码的视 ...
- F12开发人员工具如何使用、抓包、调试代码
F12开发人员工具如何使用.抓包.调试代码 前言 提示:这里我给大家推荐360极速浏览器,这个版本的浏览器F12开发人员工具很强大,非常适合抓包和调试js代码,当然了其他的浏览器也是可以的,功能上基本 ...
- 善于使用F12开发人员工具来快速调试js代码
使用F12工具快速调试扣出的js代码 前言 该文章讲述,如何善于使用F12开发人员工具来高效的调试代码,这里以360极速浏览器为案例,并且推荐使用这款浏览器,非常高效. 一.打开浏览器,打开F12开发 ...
- F12 开发人员工具入门
注意 F12 工具的部分快捷键与 Internet Explorer 相同.当你希望使用针对 F12 工具的快捷键时,则需要确保焦点在 F12 工具上.换句话说,就是先单击 F12 开发人员工具内部 ...
- F12 开发人员工具中的控制台错误消息
使用此参考解释显示在 Internet Explorer 11 的控制台 和调试程序中的错误消息. 简介 使用 F12 开发人员工具进行调试时,错误消息(例如 EC7111 或 HTML1114)将显 ...
最新文章
- YoloV5 最强剪枝技术 模型压缩,3ms推理的YoloV5mAP60
- 基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
- pytorch 构造读取数据的工具类 Dataset 与 DataLoader (pytorch Data学习一)
- YAML书写规则与数据结构
- java 代码压缩javascript_利用Java来压缩 JavaScript 代码详解
- Please Select android SDK的解决办法
- JDBC——(8)数据库连接池技术的概述
- 【Python】实现商品信息管理系统(界面版,附带数据库)
- spss数据预处理步骤_常用SPSS数据处理方法,你都会吗?
- 最大团问题回溯法求解
- 斜率、梯度(完全不一样的理解)
- 马斯克:让我成功的其实是工程思维
- 如何使用scrapy中的ItemLoader提取数据?
- HDU 1224(动态规划)
- Filling the Gaps: Multivariate Time Series Imputation by Graph Neural Networks
- HTML+CSS错题整理
- 读书笔记-在工作中保持充沛的体力
- 利用AI强化学习训练50级比卡超单挑70级超梦!
- python绘制花朵图案_Python实现平行坐标图的绘制(plotly)方式
- aoc usb显示器 linux,AOC首款USB连接云显示器
热门文章
- MySQL数据库命令大全
- Unity Asset Adventure Creator v1.75.5
- 计算机数值模拟实验报告,安徽工业大学 材料成型专业课《塑性成型计算机模拟》上机实验报告...doc...
- 属于db模式缺点的是什么_PBL教学模式的优缺点是什么?
- 宝宝腹泻怎么办?儿科医生分享小儿腹泻的辩证和处理方法
- 百度地图自定义多点规划路线
- 抽奖不够吸引用户?根据用户心理进一步优化下吧
- 瘦腿的三个黄金时间点
- ios 绘制线框_iOS使用Charts框架绘制折线图
- 时间序列分析方法——ARIMA模型案例