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. 【万字长文】别再报班了，一篇文章带你入门Python

    本文始发于个人公众号:TechFlow,原创不易,求个关注 最近有许多小伙伴后台联系我,说目前想要学习Python,但是没有一份很好的资料入门.一方面的确现在市面上Python的资料过多,导致新手会不 ...

  2. 软件——eclipse debug小技巧

    1.开启调试: 在代码编辑处右键单击,在弹出菜单中点击Debug As开始调试 2.几个快捷键: F5:跟入Step into, 一般会跟踪进入到调用函数的函数体,Step Over则不会跟踪进入,直 ...

  3. 揭露.net培训结构软谋收钱踢学员的套路

    本人以下文章全部真实,希望管理员能通过,给更多的.net学者一个警示,避免更多的.neter掉入泥坑. 本人小码农一枚,主要做.net方向,苦于进步无门,各种资料收集渠道受限,最后狠心花一个月工资报名 ...

  4. dumpsys-package

    dumpsys-package ams和pms是android系统最重要的系统服务,本文解析dumpsys package命令,看哪些PMS相关的系统信息,数据结构是运行时可以查看的. 命令提示 co ...

  5. Android 8.1 关机充电动画（一）模式选择

    system:Android 8.1 platform:RK3326/PX30 uboot kernel Android 8.1 关机充电动画(一)模式选择 Android 8.1 关机充电动画(二) ...

  6. Hexo 博客利用 Nginx 实现中英文切换

    本文记录了对 Hexo 博客进行中英文切换的配置过程,实现同一应用共用模版,任何页面可以切换到另一语言的对应页面,并对未明确语言的访问地址,根据浏览器语言进行自动跳转 实现细则 中英文地址区分 博客中 ...

  7. NOI Online #2 赛后题解

    color 题意 \(\;\) 给定\(p_1,p_2\),要求\(p_1\)的倍数格子填红色,\(p_2\)的倍数格子填蓝色,既是\(p_1\)又是\(p_2\)倍数的格子颜色任选.求是否存在一种填 ...

  8. vue相关环境搭建一条龙

    前言 如题,基于很多朋友对于环境配置及搭建存在疑问或者不熟悉的情况,因此整理一篇完整的环境搭建说明,在此默认各位到手的电脑是需要从0开始配置环境.  nvm的安装 很多同学过去可能安装node都是直接 ...

  9. SDK，JDK，API的区别

    [基础概念] 先留一波传送门: SDK:软件开发工具包(外语全称:Software Development Kit)一般都是一些软件工程师为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的 ...

  10. Redis学习笔记（九） AOF持久化

    除了RDB持久化功能之外,Redis还提供了AOF持久化功能.与RDB持久化通过保存数据库中的键值对来记录数据库状态不同,AOF持久化是通过保存Redis服务器所执行的写命令来记录数据库状态的. 服务 ...