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. 前端程序员难翻身,没有好的学习方法,你永远无法成功,vue.js专题

    学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue, 如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处 ...

  2. php5与php7安全性的区别

    0X01 前言 本篇文章大多为转载,但是修正了一些不正确的说法,对某些功能点的变更指出具体是哪个版本变更,加入了一些小更新. (原文地址:https://www.freebuf.com/article ...

  3. NetCore项目实战篇04---集成IdentityService4

    大家都知道我们的项目中已有web api,现在可以正式访问,不论任何人只要通过输入对应的api网址就可以访问到我们的api 资源,这样是很不安全的,我们需求对当前用户进行身份验证,因此我们在项目中使用 ...

  4. python学习之如何一次性输出多个变量的值

    如果要输出多个结果 ,中间使用逗号隔开,且引用变量为%(变量1,变量2,变量3)例如

  5. 201771030120-王嫄 实验一 软件工程准备 <课程学习目的思考>

    项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE 这个作业要求链接 https://www.cnblogs.com/nwnu- ...

  6. 【HBase】通过Java代码实现HBase数据库中数据的增删改查

    目录 创建maven工程,导入jar包 java代码实现创建hbase表 java代码实现向hbase表中插入数据 java代码查询hbase数据 使用rowKey查询指定列族指定列的值 通过star ...

  7. USACO 3.1 Contact

    http://www.nocow.cn/index.php/Translate:USACO/contact 题目大意:给一个只含0和1的序列,统计每个子序列的重复次数,并按次数递减来输出 考虑子序列时 ...

  8. 关于oracle怎么看清楚字段的一些实践

    在oracle存储过程或者平时编码中会有很多时候对不上字段,这时候在字段逗号后面可以主动加上--数字. 还有的是应该注意尽量让每个字段都占有一行的空间.下面部分截图说明

  9. ES6-10笔记(一)

    大纲 (慕课的图先用着) scope-作用域 作用域是指程序源代码中定义变量的区域,规定了如何查找变量,也就是确定当前执行代码对变量的访问权限. JavaScript作用域共有两种主要的工作模型--词 ...

  10. 接口testing简介

    一.基础介绍 1.什么是接口 我们常说的接口一般指2种1)API:应用程序编程接口 2)GUI:图形用户界面(接口) 这里我们主要说API——接口测试   2.接口测试的目的 测试接口的正确性和稳定性 ...