学会如何调试html代码

引言

想要学好一门语言,肯定需要先掌握如何去调试你的代码对吧!(我就不信你能100%确定你的代码的是正确的,尤其是在学习初期,免不了拼写错误、语法错误)
本文将提供网页编写时的几种调试方式,各有千秋~

1、浏览器自带的神器(F12)

如下代码

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题title>
head>
<body>
    <h1>真的好简单哦h1>
    <h2>好了这就是你的第一个网站(真的长得好丑)h2>
    <img src="hhhh.jpg" width="1100" height="672"/><br>
    <p1>这是段落p1>
body>
html>

打开后发现,如下
学会如何调试html代码_第1张图片
图片并没有加载出来,为什么呢?(当然了这里只是作为演示!这明显是图片的路径有问题嘛!)
点击我们键盘的F12(神器!)
此时,再次查看页面,如下
学会如何调试html代码_第2张图片
选中Console,可以看到浏览器将问题标识出来了
在这里插入图片描述

2、万能的打印调试

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题title>
head>
<body>
    <h1>打印h1>
    <script>
        var a = 10;
        function operate(a, b)
        {
            console.log(a);
            return  a+b;
        }
        a = operate(a,20);
        console.log(a);
    script>
body>
html>

学会如何调试html代码_第3张图片
通过几次打印,我们就可以了解到这个程序的运行逻辑!
我们甚至可以直接在console窗口输入打印,如下
学会如何调试html代码_第4张图片

3、断点调试

调试
在JavaScript中,我们可以通过设置 debugger 来设置断点,如下

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是标题title>
head>
<body>
    <h1>打印h1>
    <script>
        var a = 10;
        debugger;
        function operate(a, b)
        {
            console.log(a);
            return  a+b;
        }
        a = operate(a,20);
        console.log(a);
    script>
body>
html>

①首先需要在要断点的地方输入debugger
②打开我们的网站,会发现网页可以进行单步调试了!如下
学会如何调试html代码_第5张图片
③此时我们可以通过观察右侧的数据来对代码进行调试(如下图),主要是看Gloabl和Call Stack来观察代码的运行状况
学会如何调试html代码_第6张图片

4、优缺点

1、F12:能够将大多数的语法错误都反馈出来,但是还有一些特殊的情况,比如:逻辑有误导致的结果错误,此时就无法查看到任何报错
2、打印调试:部分没有报错,但是运行不正常,比如上面的逻辑有误,我们可以在代码两个不同位置打印我们想要的数值,如下,我们就可以快速定位是在哪个区间范围内有问题

a = 0;
一系列a的运算......
......
......
console.log(a);
一系列a的运算......
......
......
console.log(a);

3、断点调试:对每一步的运行结果都了如指掌,比如在查看别人代码的时候也是一个不错的方式

你可能感兴趣的:(Web前端/后端,html5,调试)