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. NodeJs mysql 开启事务

    如题:node后台使用mysql数据库,并使用事务来管理数据库操作. 这里主要讲一个事务的封装并写了一个INSERT 插入操作. code: 基础code: db.config.js const my ...

  2. Linked List-1

    链表一直是面试的重点问题,恰好最近看到了Stanford的一篇材料,涵盖了链表的基础知识以及派生的各种问题. 第一篇主要是关于链表的基础知识. 一.基本结构 1.数组回顾 链表和数组都是用来存储一堆数 ...

  3. 贪心--HDU 2021 发工资咯

    Description 作为杭电的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日子,养家糊口就靠它了,呵呵,但是对于学校财务处的工作人员来说,这一天则是很忙碌的一天,财务处的小胡老师最近就 ...

  4. 图论--网络流--最小割 HDU 2485 Destroying the bus stations（最短路+限流建图）

    Problem Description Gabiluso is one of the greatest spies in his country. Now he's trying to complet ...

  5. Linux下3种常用的网络测速工具

    大家好,我是良许. 不管你用的是什么操作系统,网速都是你非常关心的一个性能指标,毕竟,谁都不想看个视频结果网速卡到你怀疑人生.本文介绍三个 Linux 命令行下的网络测速工具,让你随时随地知道你的网络 ...

  6. 【x64软路由】OpenWrt(LEDE) 20200329编译 反追踪 抗污染 加速 PSW 无缝集成 UPnP NAS

    固件说明 基于Lede OpenWrt R2020.3.19版本(源码更新截止20200329)Lienol Feed及若干自行维护的软件包 结合家庭x86软路由场景需要定制 按照家庭应用场景对固件及 ...

  7. [hdu1023]递推

    http://acm.hdu.edu.cn/showproblem.php?pid=1023 如果把栈里面的元素个数表示成状态,每一步(共2 * n步)的状态构成的状态序列的种数就是答案,令dp[i] ...

  8. 自动扫雷 python

    自动扫雷一般分为两种,一种是读取内存数据,而另一种是通过分析图片获得数据,并通过模拟鼠标操作,这里我用的是第二种方式. // 2018.8.10更新 代码已上传至GitHub https://gith ...

  9. Java 在Excel中创建透视表

    本文内容介绍通过Java程序在Excel表格中根据数据来创建透视表. 环境准备 需要使用Excel类库工具—Free Spire.XLS for Java,这里使用的是免费版,可通过官网下载Jar包并 ...

  10. python --字符串学习

    一 转义字符 借用一个特殊的方法表示一系列不方便写出的内容,比如回车键,换行符,退格键 借助反斜杠字符,一旦出现反斜杠,则反斜杠后面一个或者几个字符表示已经不是原来的意思了 在字符串中,一旦出现了斜杠 ...