引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,他们写了很多代码,他们能够很快的完成工作,能够处理很多复杂的业务逻辑,但是对于浏览器的调试掌握的并不全面和熟悉,说说我自己吧,我…

引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,他们写了很多代码,他们能够很快的完成工作,能够处理很多复杂的业务逻辑,但是对于浏览器的调试掌握的并不全面和熟悉,说说我自己吧,我…

Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速…

作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后端功能,在百度上也有很多关于该功能的使用说明,而其中很多都是抄来抄去的,很多概念模糊不清,甚至错误的也发了出来,鄙人实在看不下去了,就来给大家讲解我们PHP工程师需要用到的功能,重点在后面的TimeLine; 好了,闲话少说,首先打开chrome浏览器,按F12键进入调试模式,选择NetWork,打…

chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不在本地等等.我们需要把远程css文件或者js映射到本地的文件上,通过修改本地文件进行调试和开发.通常我们可以通过以下方法来实现映射: 1.修改host文件——只能把域名映射到IP 2.使用Apache或者nginx搭建反向代理——需要装环境,配置相对繁琐 3.使用Fiddler中的AutoRespn…

flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/article/46592.htm 2,按F11调试flex程序 ,才可以进行打印调试信息: 3,修改默认打开的浏览器:窗口->首选参数(Preferences)->综合General->浏览器(Web Browser): 4,chrome必须安装debugger版本才可以进行调试: 为安装ch…

作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现…

作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现…

作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我就喜欢上它的简洁.快速,无论是启动速度还是页面解析速度还是Javascript执行速度(现…

前言 之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境传给我们的时间格式和生产环境时间格式不一致,数组对象不一致等导致线上生产报错的bug. 为了更好的在线上环境检测到具体的bug,节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦,Chrome浏览器dbug测试就显得尤为重要了. 一.定位js代码并标记dbug 首先F12打开控制台,然后选择…

现在的产品,移动端应用占据很大市场,在测试过程中,就会测试各种各样的移动端页面.测试过程,或多或少会发现些问题,无非就是前端.后端问题.后端接口问题,可以利用工具:Fiddler或charles抓包查看:前端页面问题,可以让开发把调试工具放在页面中,可如果没有该调试工具,那该如何查看前端报错问题呢?比如,页面白屏,抓包没调接口,如何拿到报错信息呢. 讲到这里,就需要"请"出今天的主角了,Chrome网页调试工具.该调试工具,只需要将手机与电脑连接就可以调试了,但其中有个问题就是FQ了,…

本文主要讲解针对chrome浏览器的调试方案,对于其他浏览器其实大同小异. 先来入门一点的 DOM元素调试 看上图: 以上图表明的1,2,3,4,5标记说明: 1,为移动设备模拟器,chorme现在是做的做好的,IE无法媲美,对于响应式开发来说,首选它. 2,属性内容 一般为id class之类的,鼠标多点击几下,可以进行样式的添加,修改. 3,看到加号图标了吗,点击,可以进行样式书写添加. 4,css样式查看,同样可以更改,被划掉的样式表示不被作用.如果有color,background等涉及…

一.参考链接 read chrome remote debugging documentation 调出开发者选项 二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏的.要启用[开发者选项],设置 -> 关于手机 -> 版本号,对着版本号点击7次. 设置 -> 开发者选项 -> USB调试 三.连接手机和电脑 1.用数据线,mac转接头把android和mac连接起来:2.打开android的chrome浏览器中需要调试的网页:3.打开mac的ch…

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

开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测 一.针对android设备 1.在android设备上开始开发者模式 2.将设备连接到PC,在chrome浏览器地址栏输入:chrome://inspect/#devices 3.在手机上打开网页的时候,chrome就会检测到网页,可以直接调试 二.针对IOS…

我使用的是魅族(魅蓝NOTE6 ),电脑是win 7系统,以下几步就可以轻松使用浏览器内置的功能调试移动端网页了: 注意:谷歌浏览器需要先FQ,不然调试页面会空白或者报404错误,(不会FQ的可以联系我 QQ:2417301781) 1. 手机开启调试模式连接电脑,确保是调试模式连接的(不知道怎么打开调试模式的可以参考:http://jingyan.baidu.com/article/046a7b3ee3b565f9c27fa9b2.html): 2. 手机上打开一个网页,只要是webview形…

谷歌输入(chrome://inspect/#devices) 我使用的是小米(红米NOTE2 ),电脑是win 10 系统,以下几步就可以轻松使用浏览器内置的功能调试移动端网页了: 1. 手机开启调试模式连接电脑,确保是调试模式连接的(不知道怎么打开调试模式的可以参考:http://jingyan.baidu.com/article/046a7b3ee3b565f9c27fa9b2.html): 2. 手机上打开一个网页,只要是webview形式的网页应该都是可以的: 3. 电脑chrome浏…

我们在开发前端代码的时候经常会遇到要调试css,js代码的时候,以前在调试的时候可能需要修改了css代码,然后在前台看一下样式,js也是一样的,可能会用alert或者是console.log输出,然后判断哪一步出错了,但是chrome现在提供了很方便的调试插件,可以大大提升开发效率. 一.css代码调试 在浏览器上按F12可以进行调试,或者在页面上右键->审查元素也可以.然后再右边增加,elements里面看到样式,可以增加,删除样式,调试好了之后,再修改样式文件就可以了. 如果修改内容很多的话…

作为一个前端开发者,不可避免的需要进行各种各样的调试. 在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程度上甚至超越了firebug. 虽然这篇介绍谷歌调试工具,但是还是要说一句,火狐的调试工具依然强大.二者都是业界调试工具的佼佼者. 谷歌开发者工具功能丰富,包括代码审查,样式调整,性能优化以及其他更高级的功能,调试方式多种多样,不一而足. 这里主要介绍控制台的console 打开控制台 Window…

在chrome的开发人员工具的配置项中,有一个sourcemap的选项,用来配置javascript源码和生成代码的关系. 如果能在浏览器中直接调试typescript代码,才能让我们真正体会到typescript开发的快乐. 首先打开chrome开发者工具的配置项,然后查看sources下的Enable source maps选项, 如果已经选中,请先取消,然后刷新页面,再选中,再刷新页面. 此时我们可以在开发这工具的Sources选项中看到ts文件. 如果你是使用visual studio开…

是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript 断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各…

1.准备阶段 具备调试功能的VSCode(我的是在win10上,版本是1.17.1) 在VSCode里下载安装Debugger for Chrome扩展插件. 2.具体操作 创建一个cocosjs工程 cocos new coco315Pro -l js -d 你的路径 -p 包名 使用VSCode打开这个工程. Ctrl + o 由于cocosjs会加载json文件,所以需要把他部署到一个本地服务器上.我用nodejs创建了一个简单的http服务器,但是不好使,虽然index.html会正常发…

谷歌浏览器不仅仅可以用来上网,对于开发人员来说,它更像是一款强大的开发辅助工具. 工欲善其事必先利其器,接下来笔者给大家分享一些Chrome的使用方法. 假如读者了解如何在Chrome中添加JavaScript断点,那请继续阅读:否则,自行脑补. 假如有这样一段代码: var a = 1; function test(){ var a, b, c, d, e; a = 2; b = a - 1; b = 9; c = 3; d = 4; e = (a + b * c) * (a - d); re…

在IE中,可以在调试程序的文档列表最下方看到一个"动态脚本"的文件夹,里面可以找到动态加载的脚本,但是...数量繁多,也不能自定义名称... 但是在 Chrome 中,貌似根本找不到动态脚本,网上搜了一下,发现可以使用   //# sourceUrl=xxx.js   来自定义动态脚本的名称,非常方便! <script> //# sourceUrl=xxx.js //其它的js代码... </script> 还可以使用 //# sourceURL=http://…

1. 使用数据线连接手机与电脑 2. 打开手机调试模式 参考:http://jingyan.baidu.com/article/f79b7cb35ada4d9145023e63.html 本人使用的miui8系统,参考:http://jingyan.baidu.com/article/636f38bb7912cbd6b8461025.html 当手机弹出是否允许调试时,一定得选择允许调试 3. F12打开chrome控制台,依次选择如下图所示(也可在chrome地址栏中输入chrome://in…

1.如果你是刚下载vscode,那么你需要下载两个插件. 1. open in browser(在浏览器中查看,支持五大主流浏览器),下载并启用. 2. view-in-browser (在浏览器中查看,同样支持五大主流浏览器). 配置文件==>首选项==>设置==>找到open in browser 文件==>首选项==>设置==>找到view-in-browser 2.如果你已经正常配置了还是不好用,出现如下错误提示: 提示windows找不到Chrome,那就是找…

    页面出现问题,就debug,这是前端开发工程师最常见的做法,但是有时候,我们打开开发者工具,在sources查找js文件,却发现怎么也找不到,无法设置断点.但是文件在network选项卡里确实load过了. 第一种 alert 第二种 console.log 不会打断思路 第三种 在需要调试的地方加上debugger,如下所示: 重新加载页面的时候,确实能够进入断点的位置:…

chrome://inspect Android:4.4+ Chrome 30+ 首次使用需要FQ…

在需要调试的js文件最顶部加上代码就可以看到了: console.log('haha'); debugger;…

问题是这样的,在使用chrome浏览器调试JavaScript的时候,突然设置的断点失效了,怎么弄都没有效果. 折腾了半天,尝试了各种方法就是没有用. 解决:重启一下chrome浏览器就好了,这似乎是一个bug. 参考: https://stackoverflow.com/questions/11788081/chrome-javascript-debugger-breakpoints-dont-do-anything 中第三个回答…