精华内容
下载资源
问答
  • 最原始也是最为简单的前端调试方式,使用浏览器的window对象的alert()方法,弹出对话框显示需要调试的变量的值。 var s = "Chrome调试"; window.alert(s); //调用window的alert()方法 alert(s);//省略window对象...

    使用浏览器window对象的alert()方法

    最原始也是最为简单的前端调试方式,使用浏览器的window对象的alert()方法,弹出对话框显示需要调试的变量的值。

            var s = "Chrome调试";
            window.alert(s); //调用window的alert()方法
            alert(s);//省略window对象,直接调用方法
    

    调试的效果如下:
    在这里插入图片描述

    使用alert()方法调试,如果通过调用多次alert()方法调式有多个变量,则需要手动关闭前面的窗口,后面的才能显示,对于多变量、复杂调试效率较低。

    打开浏览器控制台设置断点

    现在大多数浏览器都默认提供了开发工具,可以在浏览器中直接调试JS的代码。Chrome的开发工具应该是属于最好用的开发工具之一了。调出Chrome的开发工具的方法有以下几种:

    • 在浏览器窗口中,右键单击,选择检查
      在这里插入图片描述

    • 使用快捷键: Ctrl+Shift+I

    • F12 (有些电脑不支持)

    debugger 代码

    在JavaScript代码中加上debugger语句,在开发工具窗口开启的状况下, 代码执行到这句就会停下。

    debugger;
    

    效果如下:
    在这里插入图片描述
    这非常适合代码量较多的复杂项目中,快速定位需要调试的代码段。但需要注意, 如果是正式发布的时候, 需要将这些调试的代码移除。

    利用Chrome控制台输出

    console是Chrome等浏览器提供的控制台对象,调用该对象的 console.log()方法可以在开发工具控制台中输出。类似后端的控制台输出和日志,该对象提供了不同级别的调试输出,包括:

    • console.info()
    • console.debug()
    • console.warn()
    • console.error()

    console.log()

    在html中加入以下代码:

            console.log("通用信息");
            console.info("Info 级别信息");
            console.debug("Debug 调试级别信息");
            console.warn("Warn 警告级别信息");   
            console.error("Error错误级别信息");
    

    在Chrome中打开开发工具,进入Console标签页,输出效果如下图:
    在这里插入图片描述

    • 左边区块会统计各种类型输出
    • 右边显示各种级别的具体信息以及在代码文件中的位置
    • 右上角会显示错误信息和警告信息的数目

    console.table()

    JSONArray的数据通过console.table()可以以表格显示在控制台中,比如以下代码:

            var generals = [{
                    "id": 101,
                    "kingdomId": 1,
                    "name": "刘备"
                }, {
                    "id": 102,
                    "kingdomId": 1,
                    "name": "关羽"
                }];
            console.table(generals);
    

    在控制台显示如下:
    在这里插入图片描述

    console.time() 和console.timeEnd() 测试执行的时间

    console.time() 和console.timeEnd()成对出现用来测量代码段执行的时间。测试示例如下:

            console.time('My Timer');
            var items = [];
            for(var i = 0; i < 1000000; i++){
              items.push({index: i});
            }
            console.timeEnd('My Timer');
    

    在这里插入图片描述

    console.trace() 查看函数调用堆栈

    console.trace() 用来查看函数的调用堆栈。 示例代码和效果如下:

            function func1(){
                func2();
            }
            function func2(){
                func3();
            }
            function func3(){
                console.log("this is func3 call by func2, func2 call by func1");
                console.trace("func3 trace");
            }
            func1();
    

    在这里插入图片描述

    自定义输出样式

    如果对控制台的信息输出有更高的要求,也可以自定义输出的样式,比如:

    console.log('%c %s','color: red; background-color: black','My Message'); //黑底红字
    
    • %c, 对应样式
    • %s, 输出的消息

    压缩后js文件的测试

    出于性能的考虑,某些网站或是框架的JS文件会进行编译压缩。压缩后的文件没有了换行,基本无法调试,比如Ext JS框架的文件 ext-all.js 。在浏览器的控制台中点击源码按钮 {}可以重新格式化这个文件,比如:
    在这里插入图片描述
    点击后的效果如下:

    在这里插入图片描述
    基于格式化后的文件就可以正常的进行断点调试了。

    展开全文
  • javaWeb前端调试的三种方法

    千次阅读 2019-12-26 16:48:27
    前端调试常用三种方法 1、通过alert() 在js代码适当的位置使用alert方法打印变量的值,执行程序就可以看到浏览器中弹出结果 2、通过console.log()方法 在js代码适当的位置使用cosole.log(),执行程序就可以在...
    前端调试常用三种方法
    1、通过alert()
    在js代码适当的位置使用alert方法打印变量的值,执行程序就可以看到浏览器中弹出结果
    2、通过console.log()方法
    在js代码适当的位置使用cosole.log(),执行程序就可以在浏览器console控制台看到输出结果,也可以直接在浏览器cosole控制台使用该方法打印
    3、前端断点调试
    类似于后端断点调试的方法,当执行程序后,查看浏览器开发者模式的Network,筛选XHR,可以看到向后台发送的request请求、状态以及后台返回的结果response(可以帮助快速了解请求状态和结果);
    另外一点就是js的断点调试
    3.1、在Sources的选项下,左侧page下找到对应的js文件
    3.2、在需要的地方打上断点
    3.3、执行程序进入断点调试
    鼠标悬停在某一变量上可以看到变量在执行到该断点的值,右侧Scope可以看到执行到该断点时的各个变量的值
    第一个按钮(F8)就会变成一个三角形。点击运行至下一个断点,若下面没有断点,它就会自动运行至结束。 
    第二个按钮(F10)是逐行执行,如果这一行调用了一个函数,会一次性执行函数得到结果,而不会跳转到函数内部去执行函数的过程 
    第三个按钮(F11)是逐过程执行,一行一行地执行,只是当这一行是一个函数的时候,他会自动跳转到函数内部的 
    第四个按钮(shift + F11)是跳出该函数 
    第五个按钮,是忽略所有断点,自动执行至结束
    清除所有断点方法

    谷歌浏览器的禁用缓存功能

    打开 network,勾选 disable cache,这样每次刷新页面都不会通过缓存来获取数据,而是每次都会重新发出请求。
    如下图,勾选前可以看到某些请求返回的是 304。勾选禁用缓存后,每个请求返回的都是 200,可以看到没有请求是通过缓存来获取数据的了
    禁用前:
    禁用后:
     
     
    展开全文
  • 谷歌浏览器前端调试

    2019-07-14 22:01:51
    今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会有的开发者工具,按F12出现的即是,就是我们上面图片上显示的Console,我这以谷歌浏览器为例进行下基本的讲解。 Console探险 ...

    前言

    先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190714215459302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzM3NzU0,size_16,color_FFFFFF,t_70

    今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会有的开发者工具,按F12出现的即是,就是我们上面图片上显示的Console,我这以谷歌浏览器为例进行下基本的讲解。

    Console探险

    今天我们重点要学的是开发者工具中的"Console",在介绍Console之前,我们先将其它的几个面板介绍下:

    Element:主要是用来调试网页中的html标签代码和css样式代码

    Network:查看网页的http通信情况,包括Method、Type、Timeline(网络请求的时间响应情况)等

    Source:查看js文件、调试JS代码

    Timeline:查看js的执行时间,页面元素渲染时间等

    Profiles:用来查看网页的性能,比如CPU和内存消耗

    Resources:用来查看加载的各种资源文件,比如js、css、图片等

    Audits:可以分析当前网页,可以快速的分析出哪些资源被使用、哪些资源没有使用,然后提出建议

    Console:可以查看错误信息、打印调试信息、调试js代码,还可以当作JavaScript API查看

    代码调试

    我们可以用console来调试js代码:有图有真相:
    

    在这里插入图片描述

    我的代码执行到161行,如果想打印下"result",我就可以在Console中进行调试,输入代码:"alert(“result=”+result);"回车即可,即可弹出result的结果;
    在这里插入图片描述
    或者是输入代码"console.log(“result=”+result);"直接打印结果也可,如下图:

    在这里插入图片描述
    上面说了console的打印和调试功能,下面就来看下它的api功能:

    api功能

    控制台的核心对象是Console,如果我想查看console都有哪些方法和属性,我可以直接在Console中输入“console”并执行;或者用"console.dir(console)",同样可以实现查看console对象的方法和属性;
    

    在这里插入图片描述
    我们再来查看一个常用函数日期函数的方法,我们利用“console.dir()”来查了日期函数的方法:

    在这里插入图片描述

    小结

    浏览器的console是个特别强大的面板,虽然现在我也只是发现了它的冰山一角,但就这冰山一角就已经深深将我折服了!这里也只是给大家推开一扇窗户,至于窗户以外的美景就需要大家自己去探索了。

    来自 :http://blog.csdn.net/zwk626542417/article/details/42245047

    展开全文
  • 最新前端调试笔记

    2018-08-07 00:00:58
    前端调试笔记,总结的很全面,可以参考一下(学会解bug才是真才实学)
  • 前端调试bug的方法

    万次阅读 多人点赞 2019-07-06 19:04:21
    一: 断点调试(逻辑异常时使用) 在可能出错的位置设置断点 启动调试 单部执行(F10),观察变量的变化,将变量变化结果与预期结果进行比较,如果结果一致,则继续执行,如果不一致,可能出错。 找出出错位置,...
  • charlse是一款浏览器端代理工具,可以监视、拦截、替换全部的浏览器和服务器端的http协议文本,raw data等,不仅仅具有监视功能,还可以拦截并替换部分js,html页面,从而在本机调试服务器内容或绕过服务器限制等。
  • 前端调试工具详解(一)

    万次阅读 多人点赞 2018-07-10 19:01:04
    原文点击打开链接常用的调试工具有Chrome浏览器的调试工具,火狐浏览器的Firebug插件调试工具,IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速,功能强大这里主要介绍Chrome浏览器的调试...
  • 模拟前端请求 调试

    2017-08-23 13:14:31
    模拟前端请求 调试
  • 前端调试断点(相当于后台的单步调试) 断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的...
  • IntelliJ IDEA 前端调试(Js Debug)

    千次阅读 2021-06-07 15:48:37
    最近在学习Draw.io项目,希望用IntelliJ对代码进行调试,因为项目中除了少部分后台代码外,几乎都是Java Script,所以希望找到一个好的JS调试方法,而不总是依赖于浏览器的开发者控制台。 网上大部分搜索结果都需要...
  • PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂、从模拟调试到远程调试,大概分为几部分: 1、Chrome DevTools(谷歌浏览器)的模拟手机调试 2、weinre(web inspector remote)远程调试工具...
  • 应用背景: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了...于是,我们就想找到一个可以像pc端调试(f12)的调试工具——chrome   功能: 我们先看下最终想要达到的效果 上...
  • 学习笔记:VSCode 前端调试工具

    千次阅读 2019-02-01 19:50:50
    在找调试工具的过程中,知道了VSCode的lanuch.json的配置文件,弄清了前端调试、后端调试(冤枉路没少走) 对于前端调试,一个可行的方法是VSCode + Debugger for Chrome.   Debugger for Chrome需要是一个...
  • 前端调试工具

    2013-03-24 13:33:02
    前端调试工具
  • 常用的前端调试工具

    千次阅读 2017-05-10 14:53:20
    常用的前端调试工具 在做前端开发时,我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码,俗话说预先善其事必先利其器,这里我给大家推荐几款比较常用的前端调试工具。 1、Chrome的开发者工具 这...
  • 随着火狐版本的更新,已经停用了firebug这个好用的前端小工具,这里给大家分享现在怎么才能继续使用firebug这个工具。 我这里用的是火狐54版本,安装54版本的火狐浏览器,接下来的步骤如下: 然后打开浏览器,,...
  • ext前端调试

    2018-09-18 17:14:20
    前台调试:先看返回的json串是否正确,校对字符串格式的时候要仔细,确定返回的json串没有问题之后再来找前台的问题 如果浏览器控制台显示了准确的错误信息根据错误信息来调试即可,如果浏览器控制台显示的时ext-...
  • 调试海康摄像头、nvr等设备的前端Html工具
  • 如何使得界面上的元素不消失 禁用JavaScript即可,方法,F12打开调试模型,点击右上角设置图标,选择preference,选择debugger下的disable JavaScript即可禁用。
  • NULL 博文链接:https://libo-591.iteye.com/blog/1465530
  • 这就意味着开发人员调试完成后,必须手动清除这些调试代码,实在有些麻烦。 console.log("%c zhaojian" , "font-size:50px;color:red;"); 如果在使用console对象之前先进性存在性验证,其实不删除也不会对业务...
  • 文章目录1 MockServer是什么2 为什么要使用MockServer3 MockServer的作用4 搭建MockServer服务 ...及时的与前端调试也迎来了一些小的挑战。 假设有一个场景: 新项目刚开始启动时,这时候后台部分的接口都没有
  • 钉钉前端调试工具(官方)含教程

    千次阅读 2020-07-05 16:46:56
    调试工具加使用教程:传送门 钉钉官方接口:传送门
  • 火狐浏览器的新版本已经不支持firebug小虫子前端调试工具了,这里用的是54版本的火狐浏览器,里边有使用方法哦,祝你前端开发的开心。
  • 前端调试接口时遇到跨域问题解决解决跨域问题分析原因SpringBoot配置CORS原理剖析 解决跨域问题 在和前端进行接口联调时,遇到跨域问题,浏览器提示错误信息。 分析原因 浏览器的同源策略 是浏览器的一个安全功能,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 136,379
精华内容 54,551
关键字:

前端调试