文档章节

谷歌调试AJAX返回HTML中的JS脚本方法

别俊
 别俊
发布于 2017/08/28 12:06
字数 563
阅读 177
收藏 0

Chrome开发者工具里有很多高级的功能,学习起来可能有一本书那么多,今天就给大家分享个我平时利用它来调试异步脚本的经验。

我们平时在调试脚本的过程中,通常会打开浏览器的F12,点开Sources面板,在左边栏会看到已经载入的页面,脚本和样式,直接点开想调试的脚本,就可以为它添加断点,进行Debug了。但如果我们在这里找不到想要调试的脚本时怎么办呢?

方法一:在脚本中加入 debugger;

在脚本中加入debugger是最为方便不过的了,但在团队开发中,我不推荐这么干。如果你和你的小伙伴们共同维护一个页面,当你的脚本在小伙伴脚本的前面执行,而你却在这里加了一个debuger,小伙伴每次需要调试到自己代码时,都得把你的debuger跑一遍,估计他也会有一百次想要掐死你的冲动。

方法二:在Sources面板中按下快捷键 Ctrl+P 快速查找脚本

在找到自己脚本后加入断点即可调试,但如果是异步载入的js脚本,在这里找不到,也没办法调怎么办呢?

下面介绍几种方法,教你如何在ajax异步载入的HTML页面中调试JS脚本。

第一种:在脚本顶部加入黑暗魔法 @ sourceURL

//@ sourceURL= test.js

@符号与sourceURL之间必须要加空格,这样就能在sources面板中找到这个脚本了。

第二种方法比较复杂,但不需要在脚本中加入任何代码。

首先我们打开F12,找到Network。

按照这样过滤设置,找到你想要调试的JS脚本并点开。

将response中的js代码复制,然后再到Sources -> Snippets中,点击 New Snippet,将复制出来的代码粘贴进来。

最后对新建的Snippet文件名右键Run就可以进行调试了。

© 著作权归作者所有

共有 人打赏支持
别俊
粉丝 7
博文 13
码字总数 2949
作品 0
荆州
个人站长
50个实用的JavaScript工具

JavaScript是一个功能强大的客户端脚本语言,许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验,并提供丰富的互动式组件和功能。虽然它的语法相当简单,但是对开发...

晨曦之光
2012/03/09
0
0
50个实用的JavaScript工具

【IT168 分析评论】JavaScript是一个功能强大的客户端脚本语言,许多现代化的网站和Web应用程序都会使用到它。JavaScript可以增强用户的体验,并提供丰富的互动式组件和功能。虽然它的语法相...

晨曦之光
2012/03/09
0
0
Ajax学习(1)---Ajax 入门简介

学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术: • HTML 用于建立 ...

华山猛男
2014/03/27
0
0
AJAX 跨域请求 - JSONP获取JSON数据

原文地址:http://justcoding.iteye.com/blog/1366102 AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web Asynchronous JavaScript and XML (Ajax ) 是驱......

water014300
2014/12/22
0
0
用Java(JUnit4)对JavaScript(含Ajax)脚本进行单元测试

一、背景 因为原来采用过Rhino(JS解析引擎,新版JDK中也默认包含另外一个解析引擎)来在Java环境中解析JavaScript并运行其中的方法。最近看到有人在问题里提问,模拟Ajax请求的问题。所以就...

NoahX
2013/04/09
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
43分钟前
0
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
1
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
4
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部