打开 DevTools 开发者工具[F12]中的 Sources 面板,在面板左侧右键选择「Add folder to workspace」,选择添加的文件夹. 添加好后,右键一个文件,选择「Map to file system resource...」,在弹出的文本框中选择在 Workspace 中对应的文件.…

chrome调试本地项目, 引用本地javascript文件 本地文件可以访问本地文件 修改快捷方式属性 C:\Users\xxx\AppData\Local\Google\Chrome\Application\chrome.exe --args --disable-web-security --allow-file-access-from-files 修改user-agent 可以伪装成ipad或者其他的 --user-agent="Chrome_eu"…

一.在localhost添加需要指定的域名,如:test.domain.com 二.以管理员身份启动VS,并打开项目 三.修改IIS Express的配置文件(一般位于:C:\Users\当前用户\Documents\IISExpress\config目录下的applicationhost.config) 找到项目所在位置(site节点下name为项目名,若不存在该项目的节点,按照下图操作) 修改该站点节点下的bindinginfomation,默认为:*:端口号:localhost,将loca…

项目放到tomcat服务器启动起来(以tomcat服务器为例). 配置launch 把谷歌浏览器彻底关闭!(要彻底) 打断点 点左侧的调试 点刷新!(这一步也需要)…

一:首先当然是去github注册账号了. 二:注册完毕登录后,在自己的首页上面点击右上角“+”号,然后选择New repository,或者直接点击下面的绿色按钮,创建一个新仓库.如图: 然后填入仓库的名称: 填写完毕后,点击下面的绿色按钮,创建仓库. 三:安装git程序,由于我是win64的,所以只找了64位的,这是下载地址:http://download.csdn.net/detail/wblyuyang/9245051 下载完毕后直接运行,弹出的是解压的目录,不会进行安装,大家可选择一个目…

在前端开发中,我们经常需要在浏览器中进行调试,特别是一些样式的修改,如果你还是先在浏览器elements中调试好在复制到本地文件,那就真的out了. chrome浏览器的workspace功能完全可以帮你实现同步修改,但需要一些设置.好了,废话不多说,先看下面的例子: 1.在chrome中打开本地html文件,F12,打开调试器 2.在右上角的选择菜单中选择setting 3.在左侧菜单栏中选择workspace,并点击add folder添加项目目录所在文件夹 4.点击add,添加mappin…

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

今天在百度BAE上建了个应用,svn上传后发现页面间互调有些问题,几经查询发现: (1)IE下正常的window.opener.object1.object2页面间对象访问方法在Chrome下不能使用,修改为window.opener.document.getElementById('object2')解决问题: (2)Chrome调试本地网页文件时无法使用window.opener对象访问父窗口内的对象,也就无法实现窗口间的值传递.…

参考: https://my.oschina.net/ptk/blog/299464 1. 文件 tts.sublime-project 的配置如下: { "folders": [ { "path": "." } ], "settings": { "xdebug": { "url": "http://localhost", "port": 9004…

前言 对于一般开发网站的IDE自带的服务器是都跑在 localhost 地址上的.(如下图的asp.net) 而这种地址是只能在本机通过 localhost 或 127.0.0.1 地址访问到,而无法直接通过本机的内网IP地址访问的. 所以就无法实现在虚拟机中访问本地localhost站点,以及在虚拟机访问时的代码断点,调试,以及用手机访问本地站点等. 虽然可以使用IIS等web服务器发布本地IP上,来实现外部访问,但是依然无法实现代码断点,当然可以用附加进程调试,不是本文讨论范围.接下来就来讲…

Webstorm+Chrome 调试Vue项目 前言 在项目开发中,Debug模式是非常有必要的,后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西, 所以这里整理自己搭建成功的过程分享出来.可能不同的Webstorm版本会导致效果不一样,所以这里先列出我的版本. Webstorm版本: 2018.3.4 一.新建Vue项目 为了演示一个完整的示例,所以从创建项目开始,这里通过 vue脚手架命令 开始创建一个项目 vue in…

Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率 配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中. 由于Chrome并不知道当然文档对应用的文件为哪个,所以需要配置Workspace的映射关系来告诉Chrome对哪个文件做修改 使用Workspace条件: C…

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

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

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

1 解决的问题 1)        场景1:生产环境报错 对前台开发来说,业务逻辑都在js中,所以报错90%以上都是js问题. 如果生产环境出现报错,但是测试环境正常.这时修改了代码没有环境验证效果,直接升级到生产环境风险又太高--(1)万一升级后依然不好使导致客户不耐烦呢?(2)万一牵连出别的问题呢? 此时需要一种方法,可以在生产环境的网址上调试本地的js文件. 2)        场景2:本地工程不给力 某个任务修改了js文件,进行单元测试时发现本地工程太慢,或者本地工程更新了代码后项目无法…

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

转载地址:https://mp.weixin.qq.com/s?__biz=MzI1NjkxOTMyNQ==&mid=2247484266&idx=1&sn=d6bcd4842cfb3fdf877dffb7f1867be4&chksm=ea1e1118dd69980e082ec14f9a7f8c7b8b7710ef7d5fcd3ae0a215e46bc334ebc1a99d5802d8&scene=0&pass_ticket=cKIhplBw0BjsZ7KV…

一.安装chrome,安装vscode,打开vscode编辑器,安装插件Debugger for Chrome 二.新建文件 1.目录结构 . ├── index.html ├── index.js 2.在vscodeDebug工程中,新建index.html <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"…

配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中.由于Chrome并不知道当然文档对应用的文件为哪个,所以需要配置Workspace的映射关系来告诉Chrome对哪个文件做修改 使用Workspace条件: Chrome V31+(正式版) 本地服务器开发 1.点击F12工具的设置按钮2.点击左侧的workspace 3.点击Add folder4.选择服务器所在的根目录,之后确定会chrome…

Workspace是个什么样的东西呢?他可以在开发人员工具中调试改动js或者css同一时候自己主动保存文件.可以避免开发人员在工具中调试好,再到编辑器中改动一次代码的反复操作,可以提高一定的效率 配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发人员工具(F12)中对文档的改动直接应用于相应文件里. 因为Chrome并不知道当然文档相应用的文件为哪个,所以须要配置Workspace的映射关系来告诉Chrome对哪个文件做改动 使用Workspac…

很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮助的. Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html+css+javascript前台技术的学习或者开发,浏览器developer tool的使用时必不可少的,也能极大的提高学习或者开发效率.本文根据版本 23.0.1271.10.在window下,开启developer tool的快捷键为F12. 1 Developer tool功能结构 Deve…

[在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#gitandsvn] GitHub是基于git实现的代码托管.git是目前最好用的版本控制系统了,非常受欢迎,比之svn更好. GitHub可以免费使用,并且快速稳定.即使是付费帐户,每个月不超过10美刀的费用也非常便宜. 利用GitHub,你可以将项目存档,与其他人分享交流,并让其他开发者帮助你一起…

GitHub是基于git实现的代码托管.git是目前最好用的版本控制系统了,非常受欢迎,比之svn更好. GitHub可以免费使用,并且快速稳定.即使是付费帐户,每个月不超过10美刀的费用也非常便宜. 利用GitHub,你可以将项目存档,与其他人分享交流,并让其他开发者帮助你一起完成这个项目.优点在于,他支持多人共同完成一个项目,因此你们可以在同一页面对话交流. 创建自己的项目,并备份,代码不需要保存在本地或者服务器,GitHub做得非常理想. 学习Git也有很多好处.他被视为一个预先维护过程,…

在开发node.js环境时候,调试是一件很疼苦的事情,不过随着时代不断发展,先如今已经有很多种node环境代码调试方式,今天我就笔记一下我使用的方式 node-inspector: node-inspector通过Web网页与用户进行交互,一个基于WebKit内核的浏览器,如Chrome, Safari,或者 Maxthon(遨游浏览器).QQ浏览器.搜狗浏览器等 想要调试首先安装node-inspector:         1. npm install -g node-inspector  …

参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Brower Page Tabs/WebViews 注意:有个很坑爹的地方,使用该功能需要FQ,你懂得. 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备…

1.获取或设置元素的内容:3个属性:   1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文.      何时使用:只要获得完整的html代码原文时      优化:如果批量删除或插入多个子元素时,尽量避免单个操作!            每次插入或删除操作都会导致排版引擎重新layout.            如果批量删除或插入,排版引擎只需要一次layout即可.      如何优化:                1. 删除: parent.inner…

最近在做移动端的页面,但是移动端的调试很蛋疼.虽然说 90% 的功能都能用 chrome 下的模拟器来模拟解决,但是剩余的 10% 却只能在真机上调试.比如说一两个像素的误差,比如说只有真机上才能重现的一些 bug(可能是因为 pc 机反应太快无法重现,可能是因为 chrome 下的 touch 跟移动真机的 touch 还有很大差别,等).之后请教了下测试妹子,学习了下用 fiddler 代理调试本地页面,实在是爽歪歪!! 1.安装 fiddler 很显然第一步要安装 fiddler 代理,我…

使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. 我们希望看到博客园这张图片的具体信息.就可以打开chrome的开发者工具,点击箭头后选中该图片,这时代码就自动定位到了该元素的HTML代码,如下图所示: 这个页面中,右上方的蓝色阴影下即为图片元素所在的HTML代码,而开发者工具的左下方就是该元素的css样式代码: 其中最上面的是行内样式, 往下有我…

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