Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSS样式。

1.的打开调试工具

打开Chrome浏览器，按下F12键或点击页面空白，点击检查

2.使用调试工具

（1）ctrl+滚轮放大缩小代码

(2)左边html 右边CSS

（3）右边CSS样式可以改动数值和查看颜色。

（4）ctrl+0复原浏览器大小

（5）如果点击元素，发现右侧没有样式引入，极有可能类名或样式引入错误

（6）如果有样式，但是样式前面有黄色感叹号，则是样式属性书写错误

前端开发Chrome调试工具的更多相关文章

  1. 前端开发必备调试工具（Chrome的F12自带的功能和firebug插件差不多）

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  2. Web前端开发Chrome插件

    参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员 ...

  3. IE, FF, Safari前端开发常用调试工具

    一些前端开发 IE 中的常用调试工具: Microsoft Script Debugger —— Companion.JS need to install this Companion.JS —— J ...

  4. 前端开发chrome与fireFox浏览器都使用

    chrome查看元素的样式时,显示的很方便和准确,方便开发快速辨别结构. 而fireFox在css3上,我发现好像比chrome支持得更全面.

  5. 前端开发chrome console的使用 ：评估表达式 – Break易站

    本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...

  6. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  7. Web前端开发（高级）下册-目录

    多媒体与绘图 多媒体音频格式视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audi ...

  8. web前端开发教程系列-3 - 前端开发调试工具分享

    前言 一. Bug出现的原因 1. 主观原因或者是出现这么多浏览器的原因 2. 另外客观原因: 二. 调试工具 1. Firebug 2. Chrome 3. IE11 4. IETester 5. ...

  9. 适合前端开发的 Chrome 扩展有哪些？（十款）

    适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...

随机推荐

  1. 目标检测之yolo源码分析

    三.配置文件详解(config.py) import os # 数据集路径,和模型检查点路径 # # path and dataset parameter # DATA_PATH = 'data' # ...

  2. 洛谷P5018 对称二叉树

    不多扯题目 直接题解= = 1.递归 由题目可以得知,子树既可以是根节点和叶节点组成,也可以是一个节点,题意中的对称二叉子树是必须由一个根节点一直到树的最底部所组成的树. 这样一来就简单了,我们很容易 ...

  3. IoTClientTool自动升级更新

    IoTClientTool是什么 IoTClientTool是什么,IoTClientTool是IoTClient开源组件的可视化操的作实现.方便对plc设备和ModBusRtu.BACnet.串口等 ...

  4. Eugene and an array(边界麻烦的模拟)

    一道看似小学生的题,搞了我几个小时...... 首先思路就有两种: \(Ⅰ.找和为0的bad子串,再用n*(n+1)/2-bad子串得到答案\) \(Ⅱ.找和不为0的good子串\) 如果你选择找ba ...

  5. R - Weak Pair HDU - 5877 离散化+权值线段树+dfs序 区间种类数

    R - Weak Pair HDU - 5877 离散化+权值线段树 这个题目的初步想法,首先用dfs序建一颗树,然后判断对于每一个节点进行遍历,判断他的子节点和他相乘是不是小于等于k, 这么暴力的算 ...

  6. （3）.mybatis编写工具类

    编写工具类 复用与重构 复用:使用方法与函数,复用的类,构成JAR包.(工具类属于复用) 一.创建工具类(一般在src下创建util包,在util包下创建工具类). 例如:MybatisUtilds为 ...

  7. 002_python的in,while else,格式化输出,逻辑运算符,int与bool转换,编码

    数据 1.什么是数据? x=10,10是我们要存储的数据 2.为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3.数据类型 数字 字符串 列表 元组 字典 集合 ...

  8. 使用JDBC操作MySQL

    使用JDBC操作MySQL 步骤 加载驱动 连接数据库 操作数据库(增删改查) 关闭结果集,操作,数据库 准备工作 java连接MySQL的jar包 加载数据库驱动 public class Load ...

  9. springData表关系：一对一

    一.编写两个实体类 1.一对一关系实现:a:使用外键关联 b:使用主键关联,两个表的主键相同 2.外键方案:配置关联关系:两个实体类互相关联,并且在关联的属性上添加一个@OneToOne代表一个对一个 ...

  10. STM32学习笔记——USART

    STM32的USART组件支持异步.同步.单线半双工.多处理器.IrDA.LIN.SmartCard等模式,本文介绍的是异步即UART模式. 总线通信有三种模型:轮询.中断和DMA.DMA对我来说是陌 ...