【基础篇】JavaScript的4种代码调试输出方式

简介: 【基础篇】JavaScript的4种代码调试输出方式

前言

      JavaScript 不提供任何内建的打印或显示函数。那么我们在日常开发的时候,需要调试输出和打印的结果的时候该怎么办法呢,这里给大家推荐4种显示方案:

    1. 使用window.alert() 写入警告框
    2. 使用 document.write() 写入 HTML 输出
    3. 使用innerHTML 写入 HTML 元素
    4. 使用 console.log() 写入浏览器控制台

    一、使用 innerHTML

    如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。

    id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:

    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一张网页</h1>
    <p>我的第一个段落</p>
    <p id="demo"></p>
    <script>
     document.getElementById("demo").innerHTML = 5 + 6;
    </script>
    </body>
    </html>

    image.gif

    提示:更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

    二、使用 document.write()

    向网页中写入数据:

    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一张网页</h1>
    <p>我的第一个段落</p>
    <button onclick="document.write(5 + 6)">试一试</button>
    </body>
    </html>

    image.gif

    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一张网页</h1>
    <p>我的第一个段落</p>
    <button onclick="document.write(5 + 6)">试一试</button>
    </body>
    </html>

    image.gif

    注意:在 HTML 文档完全加载后使用document.write()删除所有已有的 HTMLdocument.write() 方法仅用于测试

    三.使用 window.alert()

    使用警告框来显示数据

    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一张网页</h1>
    <p>我的第一个段落</p>
    <script>
    window.alert(5 + 6);
    </script>
    </body>
    </html>

    image.gif

    四 .使用 console.log() (个人推荐最方便调试的方式)

    在浏览器中,您可使用 console.log() 方法来显示数据。

    请通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。

    <!DOCTYPE html>
    <html>
    <body>
    <h1>我的第一张网页</h1>
    <p>我的第一个段落</p>
    <script>
    console.log(5 + 6);
    </script>
    </body>
    </html>

    image.gif

    image.gif编辑

    总结

    以上就是今天要讲的内容,本文介绍了JavaScript 的四种调试输出方式,这里最推荐的一种方式是实用console.log ,通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”,里面调试的方式。

    如果这篇文章对你又把帮助的话,给博主点点关注支持一下吧~

    目录
    相关文章
    |
    23天前
    |
    JavaScript
    短小精悍的js代码
    【10月更文挑战第17天】
    119 58
    |
    1月前
    |
    JavaScript 前端开发 开发者
    如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
    【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
    219 2
    |
    1月前
    |
    JavaScript 前端开发 内存技术
    js文件的入口代码及需要入口代码的原因
    js文件的入口代码及需要入口代码的原因
    34 0
    |
    2月前
    |
    编解码 前端开发 JavaScript
    javascript检测网页缩放演示代码
    javascript检测网页缩放演示代码
    |
    2月前
    |
    Web App开发 JavaScript 前端开发
    添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
    添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
    |
    11天前
    |
    JavaScript
    原生js炫酷随机抽奖中奖效果代码
    原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
    24 3
    原生js炫酷随机抽奖中奖效果代码
    |
    16天前
    |
    JavaScript 前端开发 开发者
    如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
    随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
    163 4
    |
    17天前
    |
    JSON 移动开发 数据格式
    html5+css3+js移动端带歌词音乐播放器代码
    音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
    66 6
    |
    13天前
    |
    JavaScript 前端开发 开发者
    如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
    随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
    41 1