文档章节

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

别俊
 别俊
发布于 2017/08/28 12:06
字数 563
阅读 375
收藏 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
荆州
个人站长
私信 提问
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
JavaScript学习笔记(一)——JS基础知识介绍

术语解释 Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为...

长平狐
2013/01/06
113
0
第113天:Ajax跨域请求解决方法

一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要传递数据发送n...

半指温柔乐
2017/12/13
0
0
Rails Everyday: SJR 结合 Stimulus 构建可维护的JavaScript代码

这几个月都在使用 DHH 今年新发布的 StimulusJS 框架来写 Web 程序, 真的感觉很好, 感觉开发Web项目充满了生产力, 而不像 AngularJS/React 前端框架, 看着技术吊炸天, 但是真正要写项目的时候...

ManateeLazyCat
2018/09/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
7
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
6
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部