✨Chrome DevTools 使用指☞北 - 来源面板之调试代码 🔔

Anita_Sun
166 阅读5分钟

单步调试代码 🌈

代码暂停后，请一次一个表达式地单步调试，并在此过程中调查控制流和属性值。

跳过代码行 🐾

  • 新建一个 代码段，将下面内容粘贴到工作区。

    var app = {  
  first: 'John',  
  last: 'Doe'  
};  

// Function to update the header with the full name  
function updateHeader() {  
  var day = new Date().getDay(); // Get the current day of the week  
  var name = getName(); // Get the full name  
  updateName(name); // Update the name in the application  
}  

// Function to retrieve the full name from the app object  
function getName() {  
  var name = app.first + ' ' + app.last; // Create the full name  
  return name; // Return the full name  
}  

// Function to simulate updating the name (for demonstration purposes)  
function updateName(name) {  
  console.log("Updated Name:", name); // Log the updated name to the console  
}  

// Call the updateHeader function to execute the script  
updateHeader();

  • 当在包含与当前问题无关的函数的代码行暂停时， 请点击 Step over 单步跳过，用于执行函数 而不必亲自动手

    image.png

    点击之后会跳过函数中的内容，在第 10 行暂停

    image.png

单步进入代码行 🐾

  • 新建一个 代码段，将下面内容粘贴到工作区。

    var app = {  
  first: 'John',  
  last: 'Doe'  
};  

// Function to update the header with the full name  
function updateHeader() {  
  var day = new Date().getDay(); // Get the current day of the week  
  var name = getName(); // Get the full name  
  updateName(name); // Update the name in the application  
}  

// Function to retrieve the full name from the app object  
function getName() {  
  var name = app.first + ' ' + app.last; // Create the full name  
  return name; // Return the full name  
}  

// Function to simulate updating the name (for demonstration purposes)  
function updateName(name) {  
  console.log("Updated Name:", name); // Log the updated name to the console  
}  

// Call the updateHeader function to execute the script  
updateHeader();

  • 点击 Step into 单步进入，用于进入该函数

    image.png

    点击之后，会在 15 行暂停

    image.png

跳出代码行 🐾

  • 新建一个 代码段，将下面内容粘贴到工作区。

    var app = {  
  first: 'John',  
  last: 'Doe'  
};  

// Function to update the header with the full name  
function updateHeader() {  
  var day = new Date().getDay(); // Get the current day of the week  
  var name = getName(); // Get the full name  
  updateName(name); // Update the name in the application  
}  

// Function to retrieve the full name from the app object  
function getName() {  
  var name = app.first + ' ' + app.last; // Create the full name  
  return name; // Return the full name  
}  

// Function to simulate updating the name (for demonstration purposes)  
function updateName(name) {  
  console.log("Updated Name:", name); // Log the updated name to the console  
}  

// Call the updateHeader function to execute the script  
updateHeader();

  • 当在与正在调试的问题无关的函数内暂停时，请点击步骤 单步退出 以跳出该函数

    image.png

    点击之后，会在第十行暂停

    image.png

运行特定行之前的所有代码 🐾

  • 新建一个 代码段，将下面内容粘贴到工作区。

    var app = {  
  first: 'John',  
  last: 'Doe'  
};  

// Function to update the header with the full name  
function updateHeader() {  
  var day = new Date().getDay(); // Get the current day of the week  
  var name = getName(); // Get the full name  
  updateName(name); // Update the name in the application  
}  

// Function to retrieve the full name from the app object  
function getName() {  
  var name = app.first + ' ' + app.last; // Create the full name  
  return name; // Return the full name  
}  

// Function to simulate updating the name (for demonstration purposes)  
function updateName(name) {  
  console.log("Updated Name:", name); // Log the updated name to the console  
}  

// Call the updateHeader function to execute the script  
updateHeader();

  • 调试一个较长的函数时，可能会有很多代码与您遇到的问题无关的调试

    右键点击您感兴趣的代码行，然后选择 继续执行到此处 选项。DevTools 运行到该时间点之前的所有代码，然后在该行暂停。注意：继续执行到此处 选项只有在代码调试过程中才会出现。

    image.png

继续执行脚本 🐾

  • 新建一个 代码段，将下面内容粘贴到工作区。

    var app = {  
  first: 'John',  
  last: 'Doe'  
};  

// Function to update the header with the full name  
function updateHeader() {  
  var day = new Date().getDay(); // Get the current day of the week  
  var name = getName(); // Get the full name  
  updateName(name); // Update the name in the application  
}  

// Function to retrieve the full name from the app object  
function getName() {  
  var name = app.first + ' ' + app.last; // Create the full name  
  return name; // Return the full name  
}  

// Function to simulate updating the name (for demonstration purposes)  
function updateName(name) {  
  console.log("Updated Name:", name); // Log the updated name to the console  
}  

// Call the updateHeader function to execute the script  
updateHeader();

  • 要在暂停后继续执行脚本，请点击继续执行脚本 继续执行脚本。DevTools 执行脚本，直到下一个断点（如果有）

    image.png

    点击之后会在 21 行暂停

    image.png

强制执行脚本 🎈

  • 要忽略所有断点并强制脚本继续执行，请一直按住恢复脚本 执行 继续执行脚本 按钮，然后选择强制脚本执行 强制执行脚本

    image.png

更改会话串上下文 🐾

  • 新建 index.html 文件

    image.png

    <!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Service Worker Example</title>  
</head>  
<body>  
    <h1>Service Worker Demo</h1>  
    <button id="sendMessage">Send Message to Service Worker</button>  
    <script>  
        // 注册 Service Worker  
        if ('serviceWorker' in navigator) {  
            navigator.serviceWorker.register('service-worker.js')  
                .then(registration => {  
                    console.log('Service Worker registered with scope:', registration.scope);  
                })  
                .catch(error => {  
                    console.error('Service Worker registration failed:', error);  
                });  

            // 发送消息到 Service Worker  
            document.getElementById('sendMessage').addEventListener('click', () => {  
                navigator.serviceWorker.ready.then(registration => {  
                    registration.active.postMessage('Hello from the Main Script!');  
                });  
            });  
        }  
    </script>  
</body>  
</html>

  • 在同一目录下新建 service-worker.js 文件

    image.png

    self.addEventListener('install', event => {  
    console.log('Service Worker installed');  
});  

self.addEventListener('activate', event => {  
    console.log('Service Worker activated');  
});  

self.onmessage = function(event) {  
    console.log('Message from main script:', event.data);  
    event.source.postMessage('Hello from the Service Worker!');  
};

  • 确认 VSCode 安装 Live Server 插件。之后在 index.html 中右键选择 Open With Live Server

    image.png

    之后会在浏览器中自动打开该 HTML 文件

    image.png

  • 检查您的 service-worker.js 文件是否以正确的方式加载

    image.png

  • 在 service-worker.js 中的 self.onmessage 事件处理程序内设置一个断点。这将使您能够在 Service Worker 收到消息时暂停执行

    image.png

  • 点击页面上的“Send Message to Service Worker”按钮

    image.png

  • 切换到 “Sources” 面板，会在断点暂停。您会看到 Service Worker 上下文被选中，您可以通过 “Threads” 窗格查看当前选定的上下文。

    image.png

  • 在 “Threads” 窗格中，您会看到主要脚本上当前的上下文（蓝色箭头指向的地方），您可以单击 Service Worker 上下文，以便查看它的本地属性和全局属性

    image.png

  • 双击主要，可以切换为主线程，同时观察到本地属性和全局属性发生改变

    image.png

逐步执行以英文逗号分隔的表达式 🐾

  • 例如下面这段缩减后的代码

    function foo(){}function bar(){return foo(),foo(),42}bar();

  • Debugger 会以相同的方式逐步检查此类表达式。

逐步执行以英文逗号分隔的表达式。

观察自定义 JavaScript 表达式的值 🌈

  • 使用“Watch”窗格可监视自定义表达式的值。您可以监视任何有效的 JavaScript 表达式。

    • 点击添加表达式 添加表达式 以创建新的监视表达式。

    • 点击 Refresh 刷新 进行刷新 所有现有表达式的值。在单步调试代码时，值会自动刷新。

    • 将鼠标悬停在表达式上，然后点击删除表达式 删除表达式 删除它。

      image.png

      let num1 = 10;
let num2 = 20;
let sum = num1 + num2;
function multiply(a, b) {
  debugger
  return a * b;
}

multiply(num1, num2);
avatar
文章
阅读
粉丝