1. genymotion的安装见这里 注: a. 要先装VirtualBox, 再装genymotion b. VirtualBox不能太高,我装的是VirtualBox-4.1.40-101594-Win.exe, genymotion-2.5.2.exe c. 往genymotion中安装APK好方便,把.apk拖进去就行了 2. 使用fiddler抓包 genymotion中wifi设置proxy,代理服务器:10.0.3.2 端口:8888 fiddler设置见这里 3. 响应式调试见…

前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinre(web inspector remote)远程调试工具 3.微信的“web开发者工具”,集成了Chrome DevTools和weinre,做的比较好 4.Chrome DevTools远程调试Android和iOS页面 5.Eruda——手机网页前端调试面板 阅读说明 本文不是小白文,需要一定…

前言:习惯了在windows环境中使用Fiddler的童鞋们,是不是感觉它的网络重定向功能很酷,Fiddler能按照你设置的规制捕获网络请求,再指向本地文件,如拦截你的js文件到本地,就能很快的调试线上环境(如后台环境,测试环境,预上线环境等).但是Fiddler的使用对于初学者来说还是稍有困难的,界面功能很多,导致新手无从下手.(我当初就是这样的),并且Fiddler虽然有Mac版本,但是问题很多,我试了好几次都不行. 正文:今天给大家介绍一款新的神器,nproxy.它能通吃windows,l…

需要在ipad上调试代码, 经过一番搜索(多在google搜到的), 稍微整理下 : ). 1. Settings -> Safari -> Advanced/Developer -> Debug Console 最容易搜到的就是这个, 在桌面选择"设置", 找到"Safari", 点"高级/开发者", 据说下面会有个"调试控制台(debug console)"按钮, 但是我死活没能找到, 可能是safari…

前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinre(web inspector remote)远程调试工具 3.微信的“web开发者工具”,集成了Chrome DevTools和weinre,做的比较好 4.Chrome DevTools远程调试Android和iOS页面 5.Eruda——手机网页前端调试面板 阅读说明 本文不是小白文,需要一定…

前端调试的时候经常遇到缓存问题, chrome : f12  ---> 找到 Disabled caceh 勾上 火狐: f12 找到 禁用缓存…

概述 FireBug是一个用于网站前端开发的工具,它是FireFox浏览器的一个扩展插件.它可以用于调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.它提供了几乎前端开发需要的全部功能.官方网站:www.getfirebug.com 如何获取Firebug? 因为它是Firefox浏览器的一个扩展插件,所以首先需要下载Firefox浏览器.读者可以访问www.mozilla.com下载并安装Firefox浏览器.安装完成后用它访问https://addons.…

目前我自己最喜欢的还是 ddd . gdbgui 和 vim-vebugger插件或vimgdb插件 三种. You could try using Insight a graphical front-end for gdb written by Red Hat Or if you use GNOME desktop environment, you can also try Nemiver. kdbg is a graphical user interface to gdb, the GNU…

此处记录一下踩过的坑 之前看的这个地址:http://www.browsersync.cn/ 也就是 BrowserSync的官网上面关于代理服务器的例子不管怎么试都不行 请看下例子 browser-sync start --proxy "主机名" "css/*.css"而实际上不管怎么试都不行在git bash here 和cmd 中试了一下结果是都不行,具体情况是可以将本地服务器的地址代理到localhost:3000或者localhost:3001但是一直不能…

摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 1,打开Shadow DOM显示 浏览器对例如Video.Password等组件进行了封装,无法查看到组件的详细代码,不利于调试.幸好,通过配置能够在元素标签器中显示被隐藏的组件代码. 实现:Settings → General → Elem…

一:背景 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的 左边是pc端的chrome 浏览器, 右边是手机上的chrome 然后可以看到当鼠标移动…

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d…

前言 进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事.特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码,重新打开页面并alert一下.你可能会说,可以使用Chrome,Firefox连接手机调试啊!但那样限定于使用相应的手机版浏览器,意义并不大.Weinre,Vorlonjs跟debugGap等工具实际上也并不好用,初始化过于繁琐,而且仅能调调样式,打打log,断点调试什么的也没有办法支持.每次测试…

spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址:https://github.com/wuchangming/spy-debugger     特性 1.页面调试+抓包      2.操作简单,无需USB连接设备      3.支持HTTPS.      4.spy-debugger内部集成了weinre.node-mitmproxy.AnyPr…

平时调试网页的时候经常会短时间多次修改html和css文件,已达到最好的体验效果,但是有时候因为浏览器缓存的原因就导致虽然代码修改了,但是 页面还是没什么变化, 经常以为是自己代码修改的不对, 之后发现是缓存原因简直抓狂. 有集中方法消除影响, 如果不是一直调试的话使用chrome的硬刷新即可, ctrl+shift+R, 也可以一劳永逸 在devtool里修改, 或者也可以直接在setting里修改 这样就不会影响到我们的调试了. 当然我更推荐的是使用webstorm的 实时调试功能,非常酷炫…

http://www.cnblogs.com/rubekid/p/4851988.html 你真的了解 console 吗 2014 http://www.codeceo.com/article/javascript-debug-skills.html 最全面的JavaScript调试技巧总结 2016-4-18 console控制台: 2016-4-18 console.table([[1,2,2,3],['a','b','c','d']]);//输出表格 console.log('%c啊啊啊…

在移动端开发的时候,有时候需要真机调试的时候,没法看到console输出的信息,所以就有这个vConsole的开源插件 很方便就可以查看console输出的信息. 官方地址:https://www.npmjs.com/package/vconsole 预览地址:DEMO 使用方法: <script src="path/to/vconsole.min.js"></script> <script> // init vConsole var vConsol…

一.下载相关软件 1.Android studio  3.1.4 官网下载地址: https://dl.google.com/dl/android/studio/install/3.1.4.0/android-studio-ide-173.4907809-windows.exe?utm_source=androiddevtools&utm_medium=website 2.Genymotion 下载地址 百度云盘下载: http://pan.baidu.com/s/1jHPG7h8 二.安装 1…

Docs 开发之 Charles 配置指南 1.下载与安装 charles-proxy-4.1.4 .dmg56.12 MB已存到云盘下载 2.激活 使用公司正版license 激活 安装证书 点击证书并选择「始终信任」 (证书不被信任可能会导致网站开发时部分资源文件无法加载.) 设置代理 将你需要代理HTTPS的网站添加进去: 本地调试 如果你想代理bear-test 到本地, 你需要: 点击Map Remote: 添加你需要的设置: 这里提供一个基础配置: bear-test_example…

如果遇到下面这种错误: 点击下载Genymotion-ARM-Translation.zip 百度云连接:http://pan.baidu.com/s/1o6ifjMM 将你的虚拟器启动起来,将下载好的zip包用鼠标拖到虚拟机窗口中,出现确认对跨框点OK就行.然后重启你的虚拟机即可.…

1.console.log() 2. jQuery.ajax({                     url:"/task1/com/guodiantong/servlet/JsonToJspServlet.action",                     type:"POST",                     success:function(data){ var obj=data;                     console.l…

安装 npm install -g weinre 启动 weinre --boundHost -all- 浏览器查看 http://localhost:8080 插入相关文件 index.html document.ejs <script src="http://局域网ip:8080/target/target-script-min.js#anonymous"></script> debug 打开即可http://localhost:8080/client/#a…

转http://www.2cto.com/kf/201403/283404.html afari 前端开发调试 iOS 完美解决方案 2014-03-05      0个评论    来源:Safari 前端开发调试 iOS 完美解决方案   收藏    我要投稿 在日趋现代化的 Web 网络中,各种现代浏览器和移动终端设备的用户百分比越来越高.对于我们 Web 前端开发者来说,运行 iOS Safari 浏览器的苹果移动设备对我们来说更是不容忽视的.然而当我们需要对前端页面进行测试调试时,桌面版…

fiddle的功能相当的强悍,用户也非常广,不过今天我就教大家用fiddle进行前端调试. 首先下载软件fiddle,点击对应的版本下载安装. 安装成功后打开看到右侧的导航栏: 点击AutoResponder 接下来出现的三个选项全部都要勾选,具体什么意思就是英文翻译了. 然后: 添加一个rule 在rule editor中第一个文本框里粘贴你要替换的原地址,比如: 然后进行下一步,在第二个框中点击选择find a file,具体意思你懂得,找个本地的文件替换上个url文件: 接下来就是最后一步…

一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://wechatfe.github.io/vconsole/demo.html 使用方法 1.下载模块 checkout 文件 dist/vconsole.min.js 到本地. 2.引入模块 (1) 如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块.为了便于后续扩展,建…

之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求,后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre,可以在PC端直接调试运行在移动设备上的远程页面,,在PC端可以即时修改目标网页的HTML/CSS/Javascript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不支持断点调试,听起来是不是很厉害的样子,但真正用起来却很方便. 1.版本选择 Weinre最早是有Ja…

前端技巧:禁止浏览器static files缓存篇 由于CSS/JS文件经常需要改动,前端调试时是不希望浏览器缓存这些文件的. 本文记录博主的经验. Meta法 目前在chrome调试还没有遇到问题,好用!此方法假设浏览器是个好人!很听我们的话! <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="…

http://www.tuicool.com/articles/ZJfeAzi 由于 appspot.com被墙,一般调试不成功. 随着智能手机的普及,移动设备的浏览器功能越来越强大,我们用手机上网时,看到的再也不是难看的 wap 页面了.移动页面越来越复杂,随之而来的就是前端开发者需要面对更多开发和调试的问题.回想十年前,web 前端开发的工具十分匮乏,这种窘境一直持续到 Firefox 和 Firebug 出现,才算是有了起色. 移动 web 前端开发毫不意外的重演了这段历史.两年前我刚接触…

Chrome 实用调试技巧 2016-07-23 如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁.大量的应用插件,良好的代码规范支持.强大的V8解释器之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆. 介绍Chrome调试技巧的文章很多,本文结合我自己的开发经验,希望从实际运用的角度为大家再一次谈一谈这些功能,也希望对大家都有所帮助和启发.…

Linux上使用Qt Creator进行C/C++开发http://my.oschina.net/eechen/blog/166969Qt Creator GDB调试前端(调试Nginx):http://static.oschina.net/uploads/space/2014/0217/025140_OJwD_561214.pngQt Creator Valgrind内存分析前端(分析Nginx内存):http://static.oschina.net/uploads/space/2014/0…