首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Js调试技巧

开发人员工具、断点技巧、搜索技巧等 视频版本:【JavaScript 代码调试方法】How To Debug In Chrome -> link # 学会使用开发人员工具 ---- preserve...% o: 对象占位符;% c: 样式占位符;% d: 数字占位符 # 断点技巧 ---- dom断点 、 dom事件断点 、全局 event listener 、 xhr断点 … 下断点一般选方法开头...、结尾、return 处,遇到平坦流(for+switch) case+return 处下断 学会编辑断点条件(false -> 跳过该断点),切换断点禁用 # 搜索关键字技巧 ---- 一些常见的加密方式...特征 加密过程:new 一个 rsa 对象 ->setpublickey(key,iv (模值))->encrypt # 其他技巧 ---- 巧用 JSON.stringify/parse 来提取 js...对象 扣 js 代码或补环境(DOM、BOM),扣代码则要善于导出变量( window.xxx = ... ) 学会识别统一格式的代码,过滤掉无用的格式要求的固定代码 学会识别 webpack 打包的代码

3K50

调试JS代码

记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...,方便调试 Console....查看程序的打印输出,比如我想知道某个函数的执行时间,可以js代码中进行修改 当js代码执行之后,可以console输出中看到foo的执行时间 Network.

19K10

如何调试移动端页面

但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。...3、用数据线将iphone手机和mac连接起来,电脑的safari中按照流程执行:【开发】->【手机名称】->【正在调试的网站】 比如我iphone手机Safari上打开了百度的网址: ?...然后按照调试pc端页面的思路来调试移动端页面就可以啦~~~ 三、Charles 这个是抓包工具,可以抓取 request 和 response 数据。...然后打开手机上的任何页面就可以Charles上抓包啦~~ 如果有过滤网络请求的需要,可以做如下设置: Charles 的菜单栏选择 【Proxy】–>【Recording Settings】,然后选择...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面: ?

3.6K30

Android远程调试Web页面

曾经有一段时间专门处理了一下远程调试的事情,要解决的问题是不依赖Chrome如何在移动设备中调试Web页面。...利用Chrome调试Android Web页面,本来是很好的事情,但是由于Google在打开调试面板时,这个域名是google.com,我们都知道这个域名中国大陆被封了,但我们又要调试,于是陷入了黑暗的死循环...今天,要分享的就是,如何绕过google.com域名,并且能正常顺利的去调试Android Web页面。...我们的调试工具中,主要利用到的是host:devices,host:transport:,:forward:; 以及LOCAL SERVICES shell:command arg1 arg2…(官方文档...awesome-chrome-devtools https://github.com/ChromeDevTools/devtools-frontend 整个文档将Protocol写的很清楚,了解完它不仅在此处有大作用,其实Node.js

1.5K20

Fiddler远程调试js

使用Fiddler调试本地js   我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。...假设我们发现这个页面有问题,需要修改所引用的js文件()。 第一步:用Fiddler查看页面的数据流列表,找到这个js文件的session ?  ...第五步:修改本地文件,进行测试   我们本地的js文件中加一句alert(‘hello’) ? 刷新浏览器,看看效果,如果alert出来,那就成功了。   ...通过以上几个步骤,我们演示了怎样将HTTP请求重定向到本地的文件,进行web调试。...这种调试方式不需要发布到线上再验证,避免了修改不成功、对用户造成影响的风险,而且不需要搭建复杂的开发服务器等开发环境,非常适合快速web调试

9.9K30

你觉得“惰性求值” JS 中会怎么实现?

接上一篇《听君一席话,如听一席话,解释解释“惰性求值”~》,有掘友问:“我懂惰性求值的意思了,但是 JS 中如何实现 thunk 的呢?”...JS 不像 Haskell,其自身从语言设计层面不支持惰性求值,但是可以通过语法去 模拟实现 这一特性; 想一想,我们可以用什么来 JS 语法来模拟这一“延迟计算”的特性?...没思路的话,看前篇这一句: 《Haskell趣学指南》中,thunk 被翻译成 保证; 《Haskell 函数式编程入门》,thunk 被解释为: thunk 意为形实替换程序(有时候也称为延迟计算...实际上 Lazy.js 也正是借助 Generator 实现“惰性”的!...以实现 take 方法为例: Haskell 中,take 函数可以从头连续地取得一个列表的几个元素; Prelude> take 3 [1,2,3,4,5] [1,2,3] JS 模拟实现 take

1.4K20

iPhone页面的常用调试方法

iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用。 本文基于此,简要介绍iPhone中如何调试页面。...WKWebView Windows中结合Fiddler与ios_webkit_debug_proxy中转实现Chrome调试手机的Safari浏览器 一、能够访问页面 某些页面需要设置HOST才能进行访问...而对于某些需要账号授权登陆的页面,涉及到Cookie的模拟登录,可以使用这两个代理工具进行设置 Fiddler中可以按前文安卓的配置 Charles中也有对应的方法 ?...不过对于iPhone的调试,还需要进行真机的页面查看 一般来说,iPhone中的页面Safari浏览器中查看的 微信中的内置浏览器是WKWebView内核或 UIWebView ,WKWebView...在手机打开某个页面,然后访问 localhost:9221 ,即可进行调试 ? 或者之间chrome中输入 chrome://inspect 也可看到相应信息 ?

3.2K10

利用whistle调试移动端页面

移动端调试遇到的问题 相较于PC侧,移动端调试网页,主要会遇到以下三个问题: 没有Console,无法查看页面js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...无法debug 一般情况下,移动端页面PC的Chrome浏览器上模拟器上进行调试,但并非所有移动端页面都可以PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等...,只有真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面调试信息,暂不支持debug功能,可以通过 console.log...来代替): 利用whistle查看页面js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及...利用whistle注入vConsole vConsole是微信团队开发的轻量、可拓展、针对手机网页的前端开发者调试面板,主要原理是通过页面注入js实现模拟PC浏览器的Console功能,这边利用whistle

3K90

使用weinre调试手机页面

Weinre(Web Inspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。 工作原理 ?...展现调试界面,允许你修改dom,查看网络信息等。 3. debug target.  待调试页面。你需要在页面中嵌入一小段js。...启动 target 需要调试页面中需要引入一段js <script src="http://10.136.30.144:8081/target/target-script-min.<em>js</em>#...假设我们要<em>调试</em>的<em>页面</em>运行在10.136.30.144:3927 <em>页面</em>中引入<em>js</em>后,用手机浏览器打开待<em>调试</em><em>页面</em> http://10.136.30.144:3927/new 4....开始<em>调试</em> 手机访问<em>页面</em>后,我们回到步骤2中所说的<em>调试</em>界面。发现此时,targets中多了一条,即是我们<em>在</em>步骤3中用手机打开的待<em>调试</em><em>页面</em>。 ?

1.2K30

原 如何调试移动端页面

但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。...3、用数据线将iphone手机和mac连接起来,电脑的safari中按照流程执行:【开发】->【手机名称】->【正在调试的网站】 比如我iphone手机Safari上打开了百度的网址: ?...然后按照调试pc端页面的思路来调试移动端页面就可以啦~~~ 三、Charles 这个是抓包工具,可以抓取 request 和 response 数据。...然后打开手机上的任何页面就可以Charles上抓包啦~~ 如果有过滤网络请求的需要,可以做如下设置: Charles 的菜单栏选择 【Proxy】–>【Recording Settings】,然后选择...然后点击inspect即可开始调试当前手机谷歌浏览器打开的页面: ?

2.2K70

利用whistle调试移动端页面

移动端调试遇到的问题 相较于PC侧,移动端调试网页,主要会遇到以下三个问题: 没有Console,无法查看页面js错误及通过 console.xxx 输出的调试日志 无法查看、修改页面的DOM结构及样式...无法debug 一般情况下,移动端页面PC的Chrome浏览器上模拟器上进行调试,但并非所有移动端页面都可以PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等...,只有真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面调试信息,暂不支持debug功能,可以通过 console.log...来代替): 利用whistle查看页面js错误及通过 console.xxx 输出的调试日志 whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及...利用whistle注入vConsole vConsole是微信团队开发的轻量、可拓展、针对手机网页的前端开发者调试面板,主要原理是通过页面注入js实现模拟PC浏览器的Console功能,这边利用whistle

1.5K20
领券