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. CF思维联系– Codeforces-990C Bracket Sequences Concatenation Problem（括号匹配+模拟）

    ACM思维题训练集合 A bracket sequence is a string containing only characters "(" and ")" ...

  2. RF（控制台及日志输出中文乱码）

    1.查看 ride 版本,我这里是 RIDE 1.7.4.1 running on Python 3.6.0. 2.修改文件 D:\python3.6\Lib\site-packages\roboti ...

  3. 虚拟化云计算平台Proxmox VE

    1.虚拟化技术介绍 1.1.OpenVZ 简介 OpenVZ 是开源软件, 是基于Linux平台的操作系统级服务器虚拟化解决方案,它是基于Linux内核和作业系统的操作系统级虚拟化技术. OpenVZ ...

  4. JS中由闭包引发内存泄露的深思

    目录 一个存在内存泄露的闭包实例 什么是内存泄露 JS的垃圾回收机制 什么是闭包 什么原因导致了内存泄露 参考 1.一个存在内存泄露的闭包实例 var theThing = null; var rep ...

  5. 推荐一款Python数据可视化神器

    1. 前言 在日常工作中,为了更直观的发现数据中隐藏的规律,察觉到变量之间的互动关系,人们常常借助可视化帮助我们更好的给他人解释现象,做到一图胜千文的说明效果. 在Python中,常见的数据可视化库有 ...

  6. 你应该知道的Vue高级特性

    本文使用的Vue版本:2.6.10 Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: ...

  7. NSNotification，NSNotificationCenter的使用、iOS中五种对象间传值的方式

    学习内容 NSNitification与NotificationCenter(通知与通知中心) 通知的使用 [[NSNotificationCenter defaultCenter]addObserv ...

  8. Android中限制输入框最大输入长度

    通常情况下只需要在布局文件中加入maxlength这一属性即可 <EditText android:inputType="text" android:singleLine=& ...

  9. CTR预估模型演变及学习笔记

    [说在前面]本人博客新手一枚,象牙塔的老白,职业场的小白.以下内容仅为个人见解,欢迎批评指正,不喜勿喷![握手][握手] [再啰嗦一下]如果你对智能推荐感兴趣,欢迎先浏览我的另一篇随笔:智能推荐算法演 ...

  10. vue滑动吸顶以及锚点定位

    Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...