如何调试异步加载的js文件

最近在一个新的web项目中开发功能。这个项目的管理界面有一个特点,框架是固定的,不会刷新,每次点新的页面仅仅刷新一个div。div里面不是套的iframe,于是导致了一个问题,用浏览器无法调试异步加载页面里包含的js文件。简单的说就是在调试工具里面看不到异步加载页面里包含的js文件。

网上找到了一个解决办法,就是在需要调试的js文件顶部加一行代码:

//@ sourceURL=msgprompt.js

注意,@符号和sourceURL间必须有空格。Chrome下效果:

FireFox下也是OK的。这个办法还不错。

时间: 2024-11-10 20:00:39

如何调试异步加载的js文件的相关文章

Vue 加载外部js文件

Vue.js  加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/MGT2' } //函数的定义 export function formatXml(text) { return text } 使用外部的js <script> import {config,formatXml} from '../static/config.js' export default {

Chrome - 调试 Web Worker 加载的 js 文件

以前在使用 requirejs 时遇到过加载的 js 无法在控制台调试的情况,今天做了下总结 - 创建了 script 标签引入的 js 在 FF,Chrome 都能在调试器里找到. - Web Worker 引入的 js 无法直接在 FF,Chrome 的调试器里找到,需要在: Chrome 中:在引入的 js 文件顶部加上`//@ sourceURL=async_test.js`,然后就能在 (no domain) 中找到该 js FF 中:怎么处理还不会... eg: test.html

通过本地加载ga.js文件提高Google Anlytics性能

Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted,说明ga虽然是异步跟踪,但某些情况下对网页性能与加载时间确实存在影响 Google分析代码到底会不会影响网页性能?本地托管ga.js是否可行?本文提供本地服务器托管ga.js的基本思路与实现方法. Google Anlytics 分析代码是异步加载的,一般来讲不会影响网页性能,但是技术部的网页性能报告里老是提到ga.js的状态为Aborted.出现请

kettle转换JavaScript加载外部js文件

日常开发中,时常会出现这样一种情况.有大量的函数是通用的.而每个JavaScript里面写一遍,给维护带来很大的困扰.因而需要将公共的函数写在外部js文件中.这时就需要引入外部的公共文件了.下面是在转换里的JavaScript组件中引入外部公共js文件. //加载js文件 LoadScriptFile(getVariable("Internal.Transformation.Filename.Directory", "") +"/common_Functi

谷歌调试AJAX的js,异步加载的js

进入network, 点击clear,先把所有的请求响应清空,点击漏斗,就是filter,对所有的请求响应都进行监听,然后点击界面上的按钮,然后会出现很多请求响应的界面和js等,点击进去, 然后看路径,可以知道是那个界面,点击js可以进行js的调试. 查找js,也可以在 点击进去之后选择 然后出现查找框,输入 就可以显示出来所有查找的js,点击就会进去js 然后就可以调试js了,打断点

实现异步加载js文件及加载完成后回调

模块化工具类实现方式 基于AMD.CMD模式的JS模块化管理工具越来越流行,这些工具通常只需在页面中加载对应的工具JS,其他JS文件都是异步加载的,比如RequireJS就可以象下面这样做. 首先在页面加载 <script data-main="scripts/main.js" src="scripts/require.js"></script> 然后工具会自动识别data-main属性值,并加载对应的JS文件,在main.js可以加载更多模

如何使用 require.js ,实现js文件的异步加载,避免网页失去响应,管理模块之间的依赖性,便于代码的编写和维护。

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 1 <script src="1.js"></script> 2 <script src="2.js"></script> 3 <script src="3.js">

Javascript 文件的同步加载与异步加载

HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持.language: 已废弃.大部分浏览器会忽略该值.src: 可选.指定引入的外部代码文件,不限制后缀名.type: 必选.指定脚本的内容类型(MIME类

关于异步加载的 javascript 不出现在 chrome 开发者工具的 source 中的解决方法

首先,当你看到这篇文章时,我相信你已经是一个中级甚至是高级的前端开发了. 因为异步加载 javascript 这样的做法,在一些中小型项目几乎是看不到的. 而异步加载 javascript 归根到底,是为了性能优化,防止 JS 加载造成页面阻塞. 会注意到性能,说明你已经不再是一个停留在实现层面的前端开发了,而是一个有着更高追求的人. 在此,向所有有追求的人点赞~~~ 昨天为公司的项目做前端优化,其中一项就是做脚本异步加载. 但是奇怪的是,异步加载的 js 出现在 chrome 开发者工具的 n