前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js脚本,后来观察了一下,脚本是动态在页面里引入的,可能是因为这样所以不显示出来,但是如果不能断点调试,只靠打印日志真要把人累死了,效率太低,网络搜索试验了一下,有两种方式可以解决:

1、在脚本里边增加 //# sourceURL=xxxxxxxxx.js,名称自己命名,可以直接使用文件名,如下图:

然后在网页里打开包含这个js的页面,这样就在开发者工具里能够看到了,可以像普通js一样正常打断点并进行调试

2、第二种方法是利用 console.log("让我调试吧!") 打印日志,在浏览器console里看到输出后,点击后面的链接,即跳入动态脚本。名字一般为vmXXX,如下图:

浏览器调试动态js脚本的更多相关文章

  1. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  2. vsCode 添加浏览器调试和js调试的方法总结

    vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: {     " ...

  3. 如何调试异步加载的js文件(浏览器调试动态加载js)

    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...

  4. VSCode配合chrome浏览器调试cocos2d js项目

    1.准备阶段 具备调试功能的VSCode(我的是在win10上,版本是1.17.1) 在VSCode里下载安装Debugger for Chrome扩展插件. 2.具体操作 创建一个cocosjs工程 ...

  5. 如何使用 Chrome 浏览器调试动态加载的 Javascript 脚本

    在IE中,可以在调试程序的文档列表最下方看到一个"动态脚本"的文件夹,里面可以找到动态加载的脚本,但是...数量繁多,也不能自定义名称... 但是在 Chrome 中,貌似根本找不 ...

  6. vsCode 添加浏览器调试和js调试的方法

    1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: {     "version": "0. ...

  7. ASP.Net MVC 引用动态 js 脚本

    希望可以动态生成 js  发送给客户端使用. layout页引用: <script type="text/javascript" src="@Url.Action( ...

  8. chrome浏览器控制台创建js脚本并执行

    Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.您可以访问和从任何页面运行它们.当你运行一个片段,它从当前打开的页面的上下文中执行.本文主要讲如何 ...

  9. 判断当前IE浏览器是否支持JS

    1.server 2008 r2 64位中自带的IE默认不支持js,这样一些有JS的页面就是失效,所以如果要考虑这方面的系统,需要判断浏览器是否支持JS <div class="js- ...

随机推荐

  1. 『PyTorch』第五弹_深入理解Tensor对象_下:从内存看Tensor

    Tensor存储结构如下, 如图所示,实际上很可能多个信息区对应于同一个存储区,也就是上一节我们说到的,初始化或者普通索引时经常会有这种情况. 一.几种共享内存的情况 view a = t.arang ...

  2. PAT 1077 Kuchiguse

    1077 Kuchiguse (20 分)   The Japanese language is notorious for its sentence ending particles. Person ...

  3. ProtoBuf3.3 安装记录

    翻了很多教程,下载了 PB 的源码在自己的 mac 上编译及安装,记录下新的 1. 首先是下载源码了 https://github.com/google/protobuf/releases 虽然是 g ...

  4. 使用nginx作为webservice接口代理

    通常情况下,企业并不会直接开放系统接口给到外网,并且在企业内部同样有SOA或者ESB这样的接口统一管理的工具. 那么,大多数情况下,如果需要与外部系统,如云系统,或者其他企业的系统做接口时采取的方式如 ...

  5. VUE + vue-cli + webpack 创建新项目

    首先记录一下命令. 这是一个睿智新手的笔记. p.s.这是配置好环境以后的命令. ----------------------------------------------- $ npm insta ...

  6. 八大排序算法——选择排序(动图演示 思路分析 实例代码Java 复杂度分析)

    一.动图演示 二.思路分析 1.  第一个跟后面的所有数相比,如果小于(或小于)第一个数的时候,暂存较小数的下标,第一趟结束后,将第一个数,与暂存的那个最小数进行交换,第一个数就是最小(或最大的数) ...

  7. .net core 使用log4net日志组件

    一个web站点必须要记录日志,否则哪里出错了,完全是黑娃找黑妹,两眼一抹黑. 最常用的就是log4net日志组件.我们可以通过扩展加入日志组件. 第一步:在项目中NuGet log4net包,即 In ...

  8. leetcode python 007

    ##  翻转整数def evert(int0):    if int0<0:        flg=1    else:        flg=0    e=int(str(int0)[flg: ...

  9. centos打开matlab的正确姿势

    进入usr/local/MATLAB/R2015b/bin ./matlab

  10. web.xml配置以及一些详解

    web.xml的根元素定义如下所示(代表当前使用哪个模版): <?xml version="1.0" encoding="UTF-8"?> < ...