前端调试时不改代码但又想打印变量信息怎么办？-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端调试时不改代码但又想打印变量信息怎么办？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们都知道， Chrome的控制台可以在调试的时候打断点。程序运行到这的时候会停止

前端调试时不改代码但又想打印变量信息怎么办？

但有时候我们不希望程序断点执行，我们只是想看一些变量的信息。

按照以前的方式，我们只能去修改源码增加打印日志的语句，这样既浪费时间，又需要在调试完成后清理掉我们打印的日志代码。

其实，Chrome浏览器除了可以打断点，还可以在不修改代码的情况下则增加打印信息。

为了演示这个功能，下面写一个业务上毫无意义的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementById</title>
</head>
<body>
    <div id="box">id选择器</div>
    <div id="boxDiv">boxDiv</div>
    <div id="boxDiv">boxDiv respeat</div>

    <script>
        var a = document.getElementById('box');
        var b = document.getElementById('boxDiv');

    </script>
</body>
</html>