[JavaScript] 第六章 Chrome 浏览器中执行 JavaScript

柔情只为你懂 2024-04-23 21:03 64阅读 0赞

春花秋月何时了，往事知多少。此付费专栏不要订阅，不要订阅，听人劝。

> ?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?  
> ?简历模板、学习资料、面试题库、技术互助
> 
> ?文末获取联系方式 ?  
> ![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

## 系列专栏目录 ##

[\[Java项目实战\] 介绍Java组件安装、使用；手写框架等][Java_ _Java]  
[\[Aws服务器实战\] Aws Linux服务器上操作nginx、git、JDK、Vue等][Aws_ Aws Linux_nginx_git_JDK_Vue]  
[\[Java微服务实战\] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 ][Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]  
[\[Java基础篇\] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 ][Java_ Java_HashMap_String_StringBuffer_JVM_]  
[\[Springboot篇\] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 ][Springboot_ _Springboot_RestFul_Swagger_]  
[\[Spring MVC篇\] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 ][Spring MVC_ _Spring MVC_RestFul_]  
[\[华为云服务器实战\] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 ][_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]  
[\[Java爬虫\] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 ][Java_ _Java_Selenium_GoogleWebDriver _bing_]  
[\[Vue实战\] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 ][Vue_ _Vue3_axios_Element-ui_]  
[\[Spring\] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 ][Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]

--------------------

## 前言 ##

在Chrome浏览器中，可以使用开发者工具的调试功能来调试和执行JavaScript代码。以下是一些常用的调试技巧：设置断点、单步执行、监视变量、控制台调试、异常处理。

这只是一些Chrome浏览器调试功能的例子。要打开开发者工具并访问调试功能，你可以按下Ctrl + Shift + J（Windows / Linux）或Command + Option + J（Mac），或者在浏览器菜单中选择"更多工具" > “开发者工具”，或者在页面上点击鼠标右键选中【检查】。在开发者工具的面板中，切换到"Sources"（或"代码"）选项卡，即可访问调试功能。  
![在这里插入图片描述][d2f81db8e9c9442d9d9dc0d104e4ff97.png]

在调试过程中，你可以在断点位置暂停代码执行、单步执行、检查变量值等。这有助于理解代码的执行流程和调试潜在的问题。

## 1、准备工作 ##

### 1.1、创建html工程 ###

使用Idea创建一个空工程 或者 其他编译器（vs ， sublime ， webStome）

### 1.2、创建html文件夹，存放html文件 ###

![在这里插入图片描述][b2513b4879c04f2ab82ccc5584339f20.png]

### 1.3、创建JavaScript演示html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript页面演示</title>
        <script>
            //hello 方法
            function hello() {
          
                console.log("hello , world!")
            }
        </script>
    </head>
    <body>
    
    <input type="button" value="确定" onclick="hello()" >
    </body>
    </html>

### 1.4、通过idea打开页面 ###

![在这里插入图片描述][38716832486340e1a50b4c26c576bf14.png]  
![在这里插入图片描述][1c6d185c07794afc886b857efab6484e.png]

## 2、在浏览器上调试 ##

### 2.1、进入调试模式 ###

要打开开发者工具并访问调试功能，你可以按下Ctrl + Shift + J（Windows / Linux）或Command + Option + J（Mac），或者在浏览器菜单中选择"更多工具" > “开发者工具”，或者在页面上点击鼠标右键选中【检查】。在开发者工具的面板中，切换到"Sources"（或"代码"）选项卡，即可访问调试功能。

#### 2.1.1、进入开发者工具页面 ####

![在这里插入图片描述][57961e6125d947e2ae996e99febe9699.png]

#### 2.1.2、打开【源代码】选项卡，并选中我们要调试的html文件 ####

![在这里插入图片描述][99306ca9119248f992c620883c810dfd.png]

### 2.2、设置断点（Setting Breakpoints） ###

在你希望暂停执行的代码行上设置断点。你可以单击源代码面板中的行号，或在代码中使用debugger语句来设置断点。当代码执行到断点时，浏览器会暂停执行，你可以检查变量的值、调用堆栈等。

#### 2.2.1、修改hello方法，增加name变量，设置这里为断点 ####

//hello 方法
      function hello() {
        
          var name = 'zhangsan';
          console.log("hello , " + name + "!")
      }

#### 2.2.2、页面上设置断点 ####

![在这里插入图片描述][a3b0d5dd0c374a4ebc7138e8f28de707.png]

#### 2.2.3、单击页面上的按钮，触发hello方法，让程序跳转到断点 ####

跳转到断点（页面第10行）后，当前页面进入调试阶段，并且暂停在我们设置的断点处  
可以看到右边调用堆栈信息：正在执行的hello方法，以及onclick事件  
可以看到右边本地：this，name（此时为undefined，未声明未赋值）  
![在这里插入图片描述][ff2c246646bc4363b6227283a5b82d23.png]

### 2.3、单步执行（Stepping Through Code） ###

在调试过程中，你可以使用调试工具的单步执行功能逐行执行代码。这包括单步进入函数、单步跳出函数、单步跳过函数等选项。这样可以逐步查看代码的执行情况，帮助你理解代码逻辑和发现问题。

#### 2.3.1、进入到断点，光标打在第10行 ####

![在这里插入图片描述][c7817e863f324ba184287e6388d95945.png]

#### 2.3.2、选中【单步执行】，此时程序跳转到页面第11行（此时光标会打到第11行，且第10行信息已执行完毕） ####

可以看到右边调用堆栈信息：正在执行的hello方法，以及onclick事件  
可以看到右边本地：this，name（此时为“zhangsan”，已声明且赋值）  
![在这里插入图片描述][c79004d8eeec48e6886ef5ebb1a8613d.png]

#### 2.3.3、查看控制台打印结果 ####

![在这里插入图片描述][caef8a89ea7945309336c8ee7bbb4636.png]

### 2.4、监视变量（Monitoring Variables） ###

你可以在调试过程中监视变量的值。在断点处或代码执行时，可以查看和修改变量的值，以便检查代码中的数据问题。

#### 2.4.1、修改变量值 ####

使name变量的值，更改一次

//hello 方法
    function hello() {
        
        var name = 'zhangsan';
        console.log("hello , " + name + "!")
    
        name = 'lisi'
        console.log("hello , " + name + "!")
    }

#### 2.4.2、运行到修改的代码，多次点击【单步执行】，让程序走到第14行 ####

可以看到右边本地：this，name（此时为“lisi”，值从【zhangsan】变为【lisi】）  
![在这里插入图片描述][6a16ab1a6d7d4547a2e65a5bb8b1a3ca.png]

#### 2.4.3、继续点击【单步执行】，查看控制台结果 ####

![在这里插入图片描述][6fa02c9db2da40b2befd530ab9afa930.png]

### 2.5、控制台调试（Console Debugging） ###

在控制台中，你可以执行JavaScript代码片段，检查变量值、调用函数等。这对于在调试过程中进行一些临时测试和调试非断点位置的代码非常有用。

#### 2.5.1、在程序调试运行在11行时，在控制台检查name变量值 ####

![在这里插入图片描述][1790b889747b482ebe444f584d5a5e58.png]

#### 2.5.2、在程序调试运行在14行时，在控制台检查name变量值 ####

![在这里插入图片描述][19f4031fe35e41e0b4cb553076af018e.png]

--------------------

### 联系方式 ###

#### 微信公众号：Java微服务架构 ####

![在这里插入图片描述][c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/b07777c91e014d48bca4350bc8c78c77.png
[Java_ _Java]: https://blog.csdn.net/s445320/category_12345409.html
[Aws_ Aws Linux_nginx_git_JDK_Vue]: https://blog.csdn.net/s445320/category_12492968.html
[Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]: https://blog.csdn.net/s445320/category_12439818.html
[Java_ Java_HashMap_String_StringBuffer_JVM_]: https://blog.csdn.net/s445320/category_12369312.html
[Springboot_ _Springboot_RestFul_Swagger_]: https://blog.csdn.net/s445320/category_12273537.html
[Spring MVC_ _Spring MVC_RestFul_]: https://blog.csdn.net/s445320/category_12295009.html
[_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]: https://blog.csdn.net/s445320/category_12426609.html
[Java_ _Java_Selenium_GoogleWebDriver _bing_]: https://blog.csdn.net/s445320/category_8863085.html
[Vue_ _Vue3_axios_Element-ui_]: https://blog.csdn.net/s445320/category_12278346.html
[Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]: https://blog.csdn.net/s445320/category_12283629.html
[d2f81db8e9c9442d9d9dc0d104e4ff97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/692cc74433144a4bb5a81a2c78789c01.png
[b2513b4879c04f2ab82ccc5584339f20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8aab96910d274c849e395e9792798d5c.png
[38716832486340e1a50b4c26c576bf14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/68fefe39c63f44d3ba574be4fb4779a7.png
[1c6d185c07794afc886b857efab6484e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/4696966fc1254167a89f02b289b3f93d.png
[57961e6125d947e2ae996e99febe9699.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/2c19a65125e64688b60f5cb2242c5644.png
[99306ca9119248f992c620883c810dfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/664acaa05b2542b5a265e76861bd0b09.png
[a3b0d5dd0c374a4ebc7138e8f28de707.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f21e0e67443942b7858b8e294b83f999.png
[ff2c246646bc4363b6227283a5b82d23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0d7bb6412015451cb8bb0be68053dc76.png
[c7817e863f324ba184287e6388d95945.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6567068ec8c442b9bd4e88c2a6e327f9.png
[c79004d8eeec48e6886ef5ebb1a8613d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/414ccc33aab34099b004c8dd51696f8b.png
[caef8a89ea7945309336c8ee7bbb4636.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/4b5f3a39ba694b99a69df243f366a32c.png
[6a16ab1a6d7d4547a2e65a5bb8b1a3ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8a3d1a646b374dbb8853bd54773f5009.png
[6fa02c9db2da40b2befd530ab9afa930.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/09f793e51c544eadba5f0bbf8e67e238.png
[1790b889747b482ebe444f584d5a5e58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a2963b7a5f0b4082a2ea386805609b2e.png
[19f4031fe35e41e0b4cb553076af018e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/aac783f6786543e0a8233f1dee4dd26c.png
[c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/83103ed207eb443daa708fa80cca0538.jpeg