两个JavaScript开发必知的利器

转载请注明出处:http://blog.csdn.net/horkychen

之前有同事遇到了调试压缩Javascript代码的问题. 今天终于在Stack Overflow上发现了Charles, 用了Map Local功能,果然是神器. 虽然原理简单,就是一个Web Proxy, 当读取某个网页资源时, 使用本地文件替换掉原来的文件, 它确实是一个可以解决实际问题的功能. 特别针对压缩过的JS脚本，不容易设置断点，也不好加一些Log, 这时候用Charles可以帮我们解决这个问题了. 既然将文件都定位到本地文件, 我们就可以为所欲为了.
其它诸如CSS的修改也是没问题.(浏览器自带的调试工具可以支持Fine Print, 解决一部分挤成一团的JS Script).

除了Charles之外,还有一个类似的软件Fiddler. 下面是简单的对比:

   Charles  ( Mac OS )  商业版    www.charlesproxy.com/download/

   Fiddler (Windows only)  Open-Source  www.fiddler2.com

*已经有不少的相关资料了,我这算是再次传播吧. 还是那句话:工欲善其事,必先利其器!

软件功能不算复杂, 很容易掌握. 我这里简单贴了两张Charles的图. 关于Fiddler可以参考阿里团队贡献的文章: 使用Fiddler提高前端工作效率
(实例篇).

然后指定本地的一个替代文件就可以了。

直接使用浏览器的Debugger就可以看到效果了.

时间： 2024-10-27 13:35:25

两个JavaScript开发必知的利器的相关文章

Android开发必知 九种对话框的实现方法_Android

在开发过程中,与用户交互式免不了会用到对话框以实现更好的用户体验,所以掌握几种对话框的实现方法还是非常有必要的.在看具体实例之前先对AlertDialog做一个简单介绍.AlertDialog是功能最丰富.实践应用最广的对话框,它可以生成各种内容的对话框.但实际上AlertDialog生成的对话框总体可分为以下4个区域:图标区.标题区.内容区.按钮区. 这里总结了九种对话框的实现方法,有需要的朋友可以来学习下了   除了popupwindow实现稍微麻烦一点,其他形似都相对简单,熟悉2便即可 直

Android开发必知 九种对话框的实现方法

在开发过程中,与用户交互式免不了会用到对话框以实现更好的用户体验,所以掌握几种对话框的实现方法还是非常有必要的.在看具体实例之前先对AlertDialog做一个简单介绍.AlertDialog是功能最丰富.实践应用最广的对话框,它可以生成各种内容的对话框.但实际上AlertDialog生成的对话框总体可分为以下4个区域:图标区.标题区.内容区.按钮区. 这里总结了九种对话框的实现方法,有需要的朋友可以来学习下了 除了popupwindow实现稍微麻烦一点,其他形似都相对简单,熟悉2便即可 直接上

.NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查（实战）

Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C#来展现,但是同样适用于其他类似的OO技术平台,这些技术点可能称不上完整的技术,但是它是经验的总结,是掉过多少坑之后的觉醒,所以有必要花几分钟时间记住它,在真实的项目开发中你就知道是多么的有帮助.好了,废话不说了,进入主题. 我们在开发服务时为了调试方便会在本地进行一个基本的模块测试,你也可以认为是集

Web开发必知Javascript技巧大全_javascript技巧

JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了

完成web开发必知工具

引言: 工具乃开发之利器也!其好处数不胜数 提高你的开发效率,本来10个人日的活,可能8个人日就搞定了 提高你的代码质量,有效降低bug数 头脑风暴,开拓你的思维,考虑更全面,不留死角 管理项目,帮助你更好的掌控开发进度 帮助你更快的排查用户问题.线上故障等 ............. 这些优点,相信不说同学们也很清楚,但比较苦逼的是如何知道在开发过程要熟悉哪些利器?相信很多人都是通过技术论坛或同事交流中一点一点积累起来的,这个过程之缓慢可想而知,毕竟专门介绍工具的博客还是比较少的. 废话不多说

浅谈站长必知推广利器：快照垄断

可能很多站长还不清楚何为"快照垄断",简单的说就是在百度搜索你的关键词,首页除了推广位置以外,快照全部都是你发布的内容. 推广位置是需要付费的,而优化一个网站上首页需要很长时间,这些付出的金钱和时间都相对比较多,而笔者做快照垄断,一个月能将20个关键词做到搜索的第一页,首页覆盖率达到60%. 做了快照垄断有什么用?笔者坚持做了将近半年,先给大家总结一下快照垄断的好处. 1.免费,借助于其他平台,凭借其他平台的权重和SEO技术 2.不限关键词数量,只要你掌握了就可以随意增加或者替换想推的

开发 Electron app 必知的 4 个 tips

本文讲的是开发 Electron app 必知的 4 个 tips, Electron ,是包括 Avocode 在内的众多 app 采用的技术,能让你快速实现并运行一个跨平台桌面应用.有些问题不注意的话,你的 app 很快就会掉到"坑"里.无法从其它 app 中脱颖而出. 这是我 2016 年 5月 在 Amsterdam 的 Electron Meetup 上演讲的手抄版,加入了对 api 变化的考虑.注意,以下内容会很深入细节,并假设你对 Electron有一定了解. 首先,我是

项目管理者必知：适用于仪表盘项目的7个优秀JavaScript库

本文讲的是项目管理者必知:适用于仪表盘项目的7个优秀JavaScript库,仪表盘是用于目标或业务流程的视觉指示工具,也用于切割杂乱无章的数据,从而分割出要点的重要工具.它可以帮助评估信息并及时做出正确的决定,一款实时可视化的仪表盘通常由图标.测绘图.图形符号以及数据表格等组成. 作为项目经理,经常会面临"我们的进度怎么样了,接下来会怎么样?"这样的问题.如何用最少的几个关键指标说明项目的整体情况成为考验项目管理者的大难题! 就像开汽车,虽然汽车运行中的各种参数非常多,但仪表盘上只要显

JavaScript必知必会(九）function 说起 闭包问题_javascript技巧

function 函数格式 function getPrototyNames(o,/*optional*/ a) { a = a || []; for(var p in o) { a.push(p); } return a; } caller func.caller 返回函数调用者 function callfunc() { if(callfunc.caller) { alert(callfunc.caller.toString()); }else { alert("没有函数调用");