前两天拉取公司前端代码修改,发现在开发者工具的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. 1023. Camelcase Matching驼峰式匹配

    网址:https://leetcode.com/problems/camelcase-matching/ 依题意可得逻辑 class Solution { public: vector<bool ...

  2. GANs用于文本生成

    上学期期末老师给了我本杂志让我好好看看里面的Gans网络是如何应用在文本生成上的,文章里面也没有介绍原理性的东西,只是说了加入这个Gans模型后效果有多好,给出了模型架构图和训练时所用的语料例子,也没 ...

  3. 单点登录系统实现基于SpringBoot

    今天的干货有点湿,里面夹杂着我的泪水.可能也只有代码才能让我暂时的平静.通过本章内容你将学到单点登录系统和传统登录系统的区别,单点登录系统设计思路,Spring4 Java配置方式整合HttpClie ...

  4. excel表格中,怎么根据一列重复的数据求对应另一列总和

    如下: 求出姓名对应分数总和对应 : 首先复制一份Sheet2 对Sheet1进行操作选中A列姓名 数据->删除重复项->以前选中区域排序->删除重复项 然后删除对应成绩项选中张三对 ...

  5. 浅谈jQuery的promise

    jquery中的Promise,也就是我们所知道的Deferred对象. 举例1: var data=""; function runAsync(){ var def = $.De ...

  6. jquery promise (Deferred)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Android 音视频深入 七 学习之路的总结和资料分享

    说个实话一开始我对基于Android如何开发音视频很迷茫,甚至对音视频开发都不是很明白,我看了Android 音视频开发入门指南 http://blog.51cto.com/ticktick/1956 ...

  8. LeetCode Rotatelmage

    ---恢复内容开始--- You are given an n x n 2D matrix representing an image. Ratate the image by 90 degrees( ...

  9. 201671010142 <java程序设计>初次学习心得与感悟

    从开始对JDK的配置就遇到了问题,从这点就可以知道自己知识的薄弱.又知道了在控制台下一些常用命令的掌握.对知识的理解挺艰难,比如遇到一个新的问题就不知道该从哪里入手,有时候还不知道到底问题是啥.接受能 ...

  10. java学习笔记37(sql工具类:JDBCUtils)

    在之前的内容中,我们发现,当我们执行一条语句时,每新建一个方法,就要重新连接一次数据库,代码重复率很高,那么能不能把这些重复代码封装成一个类呢,我们学习方法时,就学习到方法就是为了提高代码的利用率,所 ...