学会调试html代码

在逆境中蜕变

2024-04-24 帮助1人

引言

想要学好一门语言，肯定需要先掌握如何去调试你的代码对吧！（我就不信你能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>

打开后发现，如下
学新通
图片并没有加载出来，为什么呢？（当然了这里只是作为演示！这明显是图片的路径有问题嘛！）
点击我们键盘的F12（神器！）
此时，再次查看页面，如下

选中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>

学新通
通过几次打印，我们就可以了解到这个程序的运行逻辑！
我们甚至可以直接在console窗口输入打印，如下

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
②打开我们的网站，会发现网页可以进行单步调试了！如下
学新通
③此时我们可以通过观察右侧的数据来对代码进行调试（如下图），主要是看Gloabl和Call Stack来观察代码的运行状况

4、优缺点

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

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

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

这篇好文章是转载于：学新通技术网

学会调试html代码

引言

1、浏览器自带的神器（F12）

2、万能的打印调试

3、断点调试

4、优缺点

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开