chrome浏览器调试
我们在开发前端代码的时候经常会遇到要调试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浏览器调试的更多相关文章
- Google Chrome浏览器调试入门————转载只为自己查看方便
Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...
- chrome浏览器调试功能之后端篇
作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...
- flex chrome浏览器调试flex程序
flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...
- chrome浏览器调试线上文件映射本地文件
chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...
- 前端chrome浏览器调试总结
引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...
- Google Chrome浏览器调试功能介绍
作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...
- 前端chrome浏览器调试
引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...
- Chrome浏览器调试技巧
本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是 ...
- 用mac的chrome浏览器调试Android手机的网页
一.参考链接 read chrome remote debugging documentation 调出开发者选项 二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...
- 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,勾选上" ...
随机推荐
- 数据结构(并查集):COGS 260. [NOI2002] 银河英雄传说
260. [NOI2002] 银河英雄传说 ★★☆ 输入文件:galaxy.in 输出文件:galaxy.out 简单对比时间限制:5 s 内存限制:128 MB [问题描述] 公元五 ...
- c#反序列化
C#序列化(转载) 2011-03-15 | 凯之风 | 转藏(2) 序列化有下列要求: A> 只序列化PUBLIC的成员变量和属性 B> 类必须有默认识构造函数 C> 如果 ...
- 高效算法——Bin Packing F - 贪心
Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Descripti ...
- Jenkins 六: 构建中执行shell或者 windows的批处理程序
Shell/ bat Jenkins 可以在构建中执行shell命令或者windows的batch 命令. 1. 选择一个项目,点击“配置”. 2. 找到“构建” –> “增加构建步骤”.选择 ...
- oracle存储过程含参数的插入数据
create or replace procedure proczipcodebyzipinsert( i_zipcode in zipcode.zip%type, i_city in z ...
- 另一个有趣的Captcha 网站
今天在一个网站注册时又发现了一个有趣的Captcha形式.给你一个翻转的图片,然后让你拽下面的slide bar让它回到正常的位置,很有趣.下面是提供这个Captcha的网站. minteye – s ...
- 辛星浅析跨域传输的CORS解决方式
首先我们有一个概念.那就是"同源准则",也就是same-origin policy,它要求一个站点(协议+主机+port号)来确定的脚本.XMLHttpRequest和Webso ...
- [PWA] 8.Unobtrusive update: Delete old cache and only keep one, hard refresh to let new SW to take control
So once you modify the code, service worker will auto create a new one and it won't take control ove ...
- 工作于内存和文件之间的页缓存, Page Cache, the Affair Between Memory and Files
原文作者:Gustavo Duarte 原文地址:http://duartes.org/gustavo/blog/post/what-your-computer-does-while-you-wait ...
- Drawable与Bitmap(转)
Drawable 以下这个是测试加载10 ...