动态调试JS脚本文件

动态调试JS脚本文件:(JS源映射 - sourceURL)与 debugge

问题描述:

当你以动态的方式加载 JS 文件的时候(就是动态加载JS脚本),你就会发现,调试这个加载后的动态JS太过于费劲了,很难调试,那么,以下方案帮你搞定!

解决方式1:sourceURL(源映射)—> //@ sourceURL=b.js

//@ sourceURL=quarterEvaluation.js

PS:

@符号和 sourceURL间必须有空格,否则达不到效果。!!!

@符号和 sourceURL间必须有空格,否则达不到效果。!!!

@符号和 sourceURL间必须有空格,否则达不到效果。!!!

例如:我在a.html页面,通过Jquery的 $(id).load(b.html)方法载入b页面内容,同时在b页面中又通过script又引用b.js文件,此时调试的时候,是很难调试b.js文件的,那么我们可以在要调试的JS顶部加上,上面的哪行代码即可!

//@ sourceURL=b.js(要调试当前文件的全名)

console.log(123);
console.log(456);

解决方式2:debugger神器

例如:

debugger
console.log(123);
debugger
console.log(456);

gitHub地址:在这里

详细地址:在这里

原文地址:https://www.cnblogs.com/yeminglong/p/12706757.html

时间: 2024-10-29 04:59:54

动态调试JS脚本文件的相关文章

Web性能优化之动态合并JS/CSS文件并缓存客户端

在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来?接下来给大家介绍在ASP.NET中动态合并加载多个js或css文件.原理:减少请求服务器的次数达到优化效果先给大家看一下传统引用方式和优化后的比较:1.传统引用方式(下图): 这样的引用方式将会请求5个js文件也就是5次http请求(下图): 2.我们来看看优化后(下图): 大家可以看到修改后只有一次请求,花费的时间节省了很

动态创建js脚本和 css样式

//1.动态添加外部js文件 function loadScript(url){ var script = document.createElement("script"); script.type = "text/javacsript"; script.src = url; document.body.appendChild(script); } //2.动态添加js代码 function loadScriptString(code){ var script =

使用jQuery动态加载js脚本文件的方法

动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法.下面就介绍一下如何使用它! 一.jQuery getScript()方法加载JavaScript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以

jQuery动态加载js脚本文件

jQuery getScript()方法加载JavaScript jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) { /* 做一些加载完成后需要执行的事情 */ }); jQuery.getScript("/path/to/myscript.js") .done(function() { /* 耶,没有问题,这里可以干点什么 */ }) .fail(function() {

firebug加载不了js脚本文件问题

转载自:http://tieba.baidu.com/p/1008322286 现象: 页面中有加载js文件,但是firebug却提示:    本页面不包含 Javascript 如果 <script> 标签有 "type" 属性,其值应为 "text/javascript" 或者"application/javascript"). 解决方案: 遇到这种情况,一般重置firebug,然后开启“脚本“功能,刷新页面,就能显示正常

wordpress主题制作:引入外部CSS样式文件和JS脚本文件(2)-要不要注册样式表(未完待续)

注册和排队样式表 添加动态内联样式:wp_add_inline_style() 检查样式表的排队状态:wp_style_is() 注销样式文件:wp_deregister_style() wp_dequeue_style() 三个动作钩子 wp_enqueue_scripts 用来在网站前台加载脚本和CSSadmin_enqueue_scripts 用来在后台加载脚本和CSSlogin_enqueue_scripts 用来在WP登录页面加载脚本和CSS 原文地址:https://www.cnbl

Webview动态注入js脚本

在webview加载完成后,给所有的img便签加上本地点击事件 /** 要注入的js代码 function(){ var objs = document.getElementsByTagName('img'); for(var i = 0; i <objs.length; i++) { objs[i].onclick = function() {window.toolbox.openImage(i,this.src); } }; **/ // 注入js函数监听 public void injec

wordpress主题制作:引入外部CSS样式文件和JS脚本文件

wordpress不建议修改模板文件header.php引入样式文件和JS文件,建议通过wp_head()和wp_footer()函数引入相关的内容. 一.显示标题 二.通过'wp_enqueue_scripts'引入scripts and styles 三.通过add_action()的"wp_head"钩子 以2019主题为例,在functons.php中相关的代码: 一.显示标题 在twentynineteen_setup()中, add_theme_support( 'titl

动态加载脚本和样式

当网站需求变大,脚本的加载就很关键了. 动态加载能减少不必要的脚本加载,提高js执行速度. 首先,动态加载JS脚本文件demo.js.代码如下: window.unload=function(){ var flag=true; if(flag){ var script=ducument.createElement('script'); script.type='text/javascrpt'; script.src='demo.js'; docement.getElementsByTagName