【基础篇】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 来激活浏览器控制台,并在菜单中选择“控制台”,里面调试的方式。

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

    目录
    相关文章
    |
    4月前
    |
    JavaScript
    短小精悍的js代码
    【10月更文挑战第17天】
    153 58
    |
    2天前
    |
    人工智能 数据可视化 机器人
    【通义灵码】三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
    我发掘出的通义灵码AI程序员新玩法:三句话生成P5.js粒子特效代码,人人都可以做交互式数字艺术
    |
    1天前
    |
    人工智能 数据可视化 架构师
    三句话生成 P5.js 粒子特效代码,人人都可以做交互式数字艺术
    短短几分钟,两个完全不懂P5.js的人类,和通义灵码AI程序员一起,共同完成了有真实物理引擎和碰撞检测的3D仿真动画。人类扮演的角色更像产品经理和架构师,提出开发需求和迭代修改方案,而AI的作用更像码农,任劳任怨,熟练用各种编程语言完成技术底层的脏活累活。这只是AI编程的冰山一角,未来,每一个艺术家都能快速做出自己的创意原型,每一个数学老师都能轻松做出自己的教学动画。
    |
    1月前
    |
    人工智能 程序员 UED
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    133 21
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    |
    3天前
    |
    自然语言处理 前端开发 JavaScript
    20 个 JavaScript 简化技巧,让你的代码更上一层楼!
    JavaScript 既灵活又强大,掌握以下20个技巧可助你编写更简洁高效的代码
    |
    1月前
    |
    前端开发 JavaScript
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    56 14
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    |
    4月前
    |
    JavaScript 前端开发 开发者
    如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
    【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
    351 2
    |
    4月前
    |
    JavaScript 前端开发 内存技术
    js文件的入口代码及需要入口代码的原因
    js文件的入口代码及需要入口代码的原因
    67 0
    |
    1月前
    |
    人工智能 JavaScript 前端开发
    一段 JavaScript 代码,集成网站AI语音助手
    根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
    |
    2月前
    |
    JavaScript 前端开发 测试技术
    在 golang 中执行 javascript 代码的方案详解
    本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
    158 15
    在 golang 中执行 javascript 代码的方案详解

    热门文章

    最新文章