Javascript调试器自编代码及运用（js调试工具和方法如何使用）

为了调试Javascript编码，JavaScript 有很多种调试器可供使用，以下是其中几个常用的调试器：

Chrome DevTools：这是一个由 Google 开发的调试器，可以在 Chrome 浏览器中使用。它提供了一整套调试工具，包括查看代码、断点调试、监视变量、网络监控等功能。

Firefox Developer Tools：这是一个由 Mozilla 开发的调试器，可以在 Firefox 浏览器中使用。它的功能和 Chrome DevTools 类似，包括查看代码、断点调试、监视变量、网络监控等功能。

Visual Studio Code：这是一个由 Microsoft 开发的代码编辑器，内置了一个调试器。它可以用来调试 JavaScript 代码以及其他语言的代码，包括 Node.js、TypeScript、Python 等等。

Node.js 自带的调试器：如果你使用 Node.js 来运行 JavaScript 代码，那么可以使用 Node.js 自带的调试器。它提供了一些命令行工具，可以用来设置断点、查看变量等等。

以上是几个常用的 JavaScript 调试器，你可以根据自己的需要选择使用。也可以自编一个简单的Javascript代码调试器，这样可以方便地插入自编的网页中。

Javascript调试器自编代码及运用（js调试工具和方法如何使用）

1、Javascript调试器自编代码

<!DOCTYPE html>
<html>
<head>
<title>银河统计</title>
<meta content="text/html; charset=UTF-8">
<style>
<!--
//-->
</style>
</head>
<body>
<img id="myLogo" style="width:120px; padding:0px; margin:5px;" img src="http://www.galaxystatistics.com/webTJX/mobile/logo1.png"/>
<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)" style="margin-left:2em; font-size:14pt;">点击运行代码窗口</a>
<center>
<textarea id="oCode" style="width:94%; height:300px; border:1px solid #555555; text-align:left; padding-left:5px;">
console.clear();
let a1 = 1; b1=-2; c1=-1;
let a2 = 2; b2=1; c2=1;
let v = a1*b2-a2*b1;
if (v==0) {
		console.log("无解");
} else {
    x = (b2*c1-b1*c2)/v;
    y = (a1*c2-a2*c1)/v;
    console.log("x = "+x+"; y = "+y);
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴</div><p/>
</div>
<i>注：Console对象用于JavaScript调试，为了显示Console.log输出结果，通过按Control+Shift+i（PC平台）来打开Console窗口</i>
</body></html>

网页代码代码运行效果如下：

2、console对象常用方法

JavaScript 中的 console 是一个对象，它提供了一些方法用于向控制台输出信息。控制台是一个在浏览器环境中提供的命令行界面，可以用来显示程序的输出信息以及调试信息。

Console对象用于JavaScript调试，为了显示Console.log输出结果，通过按【Control+Shift+i】（PC平台）来打开Console窗口。如图：

常用的 console 方法：

console..clear()：清空控制台信息；
console.log()：向控制台输出普通信息，通常用于调试和输出程序的运行状态；
console.error()：向控制台输出错误信息，通常用于捕捉和显示程序的错误信息；
console.warn()：向控制台输出警告信息，通常用于显示程序的警告信息；
console.info()：向控制台输出信息，通常用于显示一些额外的信息。；
console.table()：以表格形式输出一个数组或者对象的属性；
console.time() 和 console.timeEnd()：用于计算程序执行时间，可以用来优化程序性能；
console.group() 和 console.groupEnd()：用于将输出信息分组显示，方便查看。

以上是 console 对象的一些常用方法，使用这些方法可以方便地在控制台中输出调试信息，帮助开发者调试程序和解决问题。

本文介绍的Javascript调试器自编代码可以随时插入各类网页中。以下是进一步精简的代码片段：

<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)">点击运行代码窗口</a>
<textarea id="oCode" style="width:94%; height:300px; text-align:left; padding-left:5px;">
console.clear();
//代码块
console.log();
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴</div>
</div>

通常将这段代码复制到网络统计学网页后面，这样就可以随时调试网页中介绍的代码。