1. 打开Chrome浏览器，点击右上角的三个点图标，选择“更多工具”>“开发者工具”。
2. 在开发者工具中，点击左侧的“Console”选项卡。
3. 在控制台窗口中，输入JavaScript代码并按回车键执行。例如，输入以下代码：
javascript
console.log("Hello, World!");
4. 在控制台窗口中，可以看到执行结果。如果需要调试，可以在代码行前添加注释，以便在调试时查看。例如，将上述代码修改为：
javascript
// 输出 "Hello, World!"
console.log("Hello, World!");
5. 点击“Console”选项卡下方的“Sources”按钮，展开源代码视图。在这里，可以查看完整的HTML、CSS和JavaScript代码。
6. 如果需要查看特定元素的源代码，可以点击元素，然后点击“Sources”按钮展开源代码视图。
7. 在源代码视图中，可以使用快捷键（如F12）或右键菜单进行调试。例如，按下F12键，浏览器将逐行执行代码。
8. 在调试过程中，可以通过点击“Step Over”、“Step Into”等按钮来逐行执行代码。还可以使用断点功能，暂停代码执行到指定位置。
9. 在调试过程中，可以使用条件语句（如if、switch）来控制代码执行流程。例如，输入以下代码：
javascript
if (condition) {
console.log("Condition is true");
} else {
console.log("Condition is false");
}
10. 在源代码视图中，可以使用鼠标悬停在变量上，查看其值。例如，将上述代码修改为：
javascript
var condition = true;
if (condition) {
console.log("Condition is true");
} else {
console.log("Condition is false");
}
11. 在源代码视图中，可以使用鼠标拖动缩放代码块。例如，将上述代码修改为：
javascript
var condition = true;
if (condition) {
console.log("Condition is true");
} else {
console.log("Condition is false");
}
12. 在源代码视图中，可以使用鼠标拖动移动代码块。例如，将上述代码修改为：
javascript
var condition = true;
if (condition) {
console.log("Condition is true");
} else {
console.log("Condition is false");
}
13. 完成调试后，点击“Sources”按钮关闭源代码视图。
