三九宝宝网宝宝百科宝宝知识

如何直接调试线上页面的JavaScript和C

01月08日 编辑 39baobao.com

[在jsp页面日期选择框]做这个用控件吧,好做 1、下载My97DatePicker4.8Beta3 http://.my97.net/dp/down/My97DatePickerBeta.7z 2、页面中引入 <script language="javascript" type="text/javascript" s...+阅读

一个典型的工作场景是:线上的某个页面出现了bugs,需要紧急修复。这时候有个简单的传统做法是,将问题页面另存为本地html文件,然后疯狂的寻找并修复bugs,等弄好了,再将修改后的js和css上传到线上并检查校验bugs是否已修正。 上面的方法,对于简单页面,是够用的。但是对于稍微复杂的页面,IE的另存为经常不保真,如果页面中涉及Ajax等bugs,保存到本地更是难以调试。

这时有个很自然的做法是,将开发环境Run起来,当时怎么开发的,现在就怎么调试。这样做肯定能解决问题,但要调动很多资源,后台开发工程师、前台开发工程师等等都要参与。对于小团队来说,也许是可行的,对于大团队来说,如此大动干戈,除非到了最后,是不会这样做的。那我们应该怎么做呢?先来看一个工具: Web开发中有个大名鼎鼎的工具:Fiddler. Fiddler是一个http调试代理,它能够记录你电脑和互联网之间的所有http通讯。

Fiddler可以让你检查所有的http通讯,设置断点,以及Fiddle(Fiddle的英文意思是胡乱修改,很幽默的表达Fiddler的用途)所有“进出”的数据(指cookie,html,js,css等数据)。 嘿嘿,是否从上面的介绍中嗅探到了某种解决方案?Fiddler可以让我们Fiddle所有”进出“的数据!我们要调试线上页面的bugs时,可以先分析是什么文件引起的,找出这些嫌疑文件,下载到本地,然后利用Fiddler将线上的请求Fiddle到本地的对应文件。

这样我们就可以随心所欲的修改这些嫌疑文件了,直接刷新线上的页面就可以看到效果,烦人的环境问题根本就不用考虑,而且一切都是高保真的。 上面说的是思路,下面我会举个例子来说明。 举例子之前,请先安装Fiddler(怎么下载安装就不多了,一路Next)。安装好后,在IE的工具条上会出现Fiddler2图标,点击启动Fiddler. 启动后,通过IE访问任何网站时,所有http进出数据都会在Fiddler上显示出来。

但是等等,怎么老说IE呢?虽然在IE上能通过IE Developer Toolbar和Companion.JS来调试CSS和JS,但被firebug宠坏了的我们,总期望着Firefox上能搞定的问题绝不通过IE去调试。为了我们的美好期望,根据Fiddler的官方说明,我们只要简单的进行以下操作即可: 首先将要调试的文件下载到本地,启动Fiddler,在AutoResponder栏勾选启用,并添加替换规则: 如上图添加两条规则后,刷新页面,上面两个js文件就从本地获取了,嘿嘿。

接下来,用喜欢的文本编辑器尽情的调试吧,就像当初开发时一样。等把bugs解决了,压缩并上传相应的js文件,并通知后台开发者修改vm中js文件的时间戳,然后等着发布就行。 CSS也是一样的调试,不赘述。在firefox、Safari、Opera中的的使用方法类似,不多说。 其它和前端开发调试密切相关的技巧: 2.使用DIFF比较http包的统计数据; 3.使用Filter过滤信息。

比如禁用JS, 设置断点等等。 4.使用bpu + Inspectors动态修改Response. 比如修改页面中的JS代码片段等等,非常有用。 5.使用Request Buidler测试请求。可以很方便的测试ajax代码(可惜不支持断点)。 6.使用Statistics + Timeline + neXpert查看性能等统计数据,可以分析网页加载慢的原因。 7.使用CustomRules, 自定义配置和命令等。比如修改var m_DisableCaching: boolean = false;的值为true, 就可以默认禁止缓存。

还可以自定义命令等等。 8.开发自己的扩展。

以下为关联文档:

php把当前页面另存为HTML格式。<?php ob_start(); //打开缓冲区 echo "Oh, no no no!"; //html内容 $file = 'a.html'; $handle = fopen($file, 'w'); $ob = ob_get_contents(); //取得缓冲区内容 fwrite($handl...

php如何生成HTML页面要详细的生成过程代码很简单,用ob_start压制,然后保存到一个html页面就可以了,写了个小演示 访问时在后面加参数 ?id=xxx xxx为任意数字,你把里面的输出换成你的动态页面就可以了,代码里有解释 ob_star...

电脑关机时出现当前页面发生错误之后就是脚本错误怎么办1.启动 Internet Explorer。 在“工具”菜单上,单击“Internet 选项”。 在“Internet 选项”对话框中,单击“安全”。 单击“默认级别”。 单击“确定”。 2.删除所有临时的...

华为手机的USB调试在哪打开工具:华为P20手机 1、首先,我们在华为手机上刷左右屏幕,然后在屏幕上找到“设置”图标。 2、接下来,您将打开华为手机的设置页面,在页面上找到“系统”的设置项。 3、此时,弹出...

华为usb调试在哪华为手机打开USB调试的方法,可以通过以下步骤操作来实现(华为mate7手机为例): 1、在华为手机桌面上,点击设置图标进入。 2、进入设置列表菜单,点击关于手机选项进入。 3、如下图...

华为手机如何打开usb调试1、首先需要在桌面上找到并且点击百“设置” 2、然后在设置列表的最下方点击“系统” 3、在系统界面的最上方有一项“关于手机”,点度击以后在新的页面中会看到一项“版本...

WPS如何更改页面排版WPS更改页面排版的具体操作步骤如下: 我们需要准备的材料有:电脑、wps。 1、首先我们打开需要编辑是WPS,鼠标左键选中文字。 2、然后我们在该页面中点击“文字工具”选项。 3...

word文档怎么排版页面设置在使用Word的时候,很多时候我们需要对Word里面的内容进行排版。但是很多小伙伴都觉得Word排版很难、很耗时。那么今天小编就给大家分享几个实用又较为基础的排版技巧,下面就一...

卫星电视怎么调试将机器连接好后,按下信息键,这时只有信号强度有百分之七十多,信号质量为零或很小,说明连接正确.只是方位角和仰角没有调整好.用对星指导估算一下所接收卫星的方位角和仰角.没有...

推荐阅读
图文推荐