我们在开发前端代码的时候经常会遇到要调试css,js代码的时候,以前在调试的时候可能需要修改了css代码,然后在前台看一下样式,js也是一样的,可能会用alert或者是console.log输出,然后判断哪一步出错了,但是chrome现在提供了很方便的调试插件,可以大大提升开发效率。

一、css代码调试

在浏览器上按F12可以进行调试,或者在页面上右键-》审查元素也可以。然后再右边增加,elements里面看到样式,可以增加,删除样式,调试好了之后,再修改样式文件就可以了。

如果修改内容很多的话,可以右边的css文件进入修改界面,在里面直接编辑就可以了。

二、js代码调试

和css代码差不多吧,这里简单介绍一下断点调试

进入source,然后可以看见里面的js和css文件,双击js文件,可以在js文件做点点击,设置断点,然后按f5,加载时,会进入断点,可以清楚的看见调试的结果。不过有时候在调试进入循环的时候,可能有100的值,也不可能一直执行下去,如果你希望直接跳到i=50的时候,你可以设置条件断点,会在i=50的时候进入断点,执行后面的。在断点上右击然后选择Edit breakpoint,在里面输入条件。当然你也可以在Breakpoints里临时禁用掉一些断点,而不用删除断点。

下面大家肯定还能看到DOM Breakpoints,XHR Breakpoints,Event Listener Breakpoints。

1、子节点修改;2、自身属性修改3、自身节点被删除,设置之后,在js做了对应的操作的时候,会在具体的地方停下来。

基本上常用的也就这么多,在调试的过程中可以用快捷键:F8、F10、F11或 Shitf+F11

chrome浏览器调试的更多相关文章

  1. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  2. chrome浏览器调试功能之后端篇

    作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...

  3. flex chrome浏览器调试flex程序

    flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...

  4. chrome浏览器调试线上文件映射本地文件

    chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...

  5. 前端chrome浏览器调试总结

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...

  6. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  7. 前端chrome浏览器调试

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...

  8. Chrome浏览器调试技巧

    本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...

  9. 用mac的chrome浏览器调试Android手机的网页

    一.参考链接 read chrome remote debugging documentation 调出开发者选项 二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...

  10. chrome浏览器调试报错:Failed to load resource: the server responsed width a status of 404 (Not Found)…http://127.0.0.1:5099/favicon.ico

    chrome浏览器在调试的时候默认会查找根目录下的favicon.ico文件,如果不存在就会报错. 解决办法:F12,点击<top frame>左侧漏斗形状的filter,勾选上" ...

随机推荐

  1. OpenGL图形管线和坐标变换

    转:http://blog.csdn.net/zhulinpptor/article/details/5897102 1. OpenGL 渲染管线 OpenGL渲染管线分为两大部分,模型观测变换(Mo ...

  2. poj2774 Long Long Message(后缀数组)

    [题目链接] http://poj.org/problem?id=2774 [题意] A & B的最长公共子序列. [思路] 拼接+height数组.将AB拼接成一个形如A$B的串,枚举hei ...

  3. Codeforces Round #326 (Div. 1) - C. Duff in the Army 树上倍增算法

    题意:一个n个点的数, m个人住在其中的某些点上, 每个人的标号1-m, 询问u-v 路径上标号前a个人,并输出标号,a < 10. 作法, 利用倍增, ID[j][i] 表示i到i的第2^j个 ...

  4. Best Reward HDU 3613(回文子串Manacher)

    题目大意:有一个串(全部由小写字母组成),现在要把它分成两部分,如果分开后的部分是回文串就计算出来它的价值总和,如果不是回文的那么价值就是0,最多能得到的最大价值.   分析:首先的明白这个最大价值有 ...

  5. Hibernate四 批量处理

    Hibernate批量处理一 批量插入将很多条记录插入数据库时,Hibernate通常会采用以下做法:public void test() { for(int i=0;i<1000;i++){ ...

  6. 获取contenteditable的内容 对html进行处理 兼容 chrome、IE、Firefox

    var html = $(this).html();if(html){ var lineSign = html.indexOf('<div>'); if(html.indexOf('< ...

  7. Linux用户与用户组的详解

    1,用户和用户组文件   在linux中,用户帐号,用户密码,用户组信息和用户组密码均是存放在不同的配置文件中的.   在linux系统中,所创建的用户帐号和其相关信息(密码除外)均是存放在/etc/ ...

  8. 安卓在SQLiteOpenHelper类进行版本升级和降级

    一.升级(使用到onUpgrade()方法和onCreate()没有安装过才用到) 简单理一下思路:  v1.0 (也就是说第一次使用这软件,没有安装过 所有在onCreate() 方法里写代码)   ...

  9. CF 295E Yaroslav and Points(Splay)

    题目大意: 两个操作 1 id op  把id的位置+op 2 id op  查询在[id.op]之间的全部的数的差 思路: 关键是pushup函数. 自己退一下会发现.跟区间的总和,区间的节点个数有 ...

  10. cocos2d-x项目过程记录(Objective-C转C++)

    (原创作品,欢迎转载,注明出处,谢谢:http://www.cnblogs.com/binxindoudou/admin/EditPosts.aspx?postid=3179335) 1.单例模式中, ...