VScode调试mv
# 用VScode的方式来运行调试mv项目
本小节内容涉及到了插件开发的内容,但是并不涉及具体代码编写,只涉及到简单的软件设置。
在实际开发的时候,会遇到这样的一个开发情况:我需要先对插件设置断点,然后再启动游戏触碰断点,随后再跟着进程一步一步的摸清楚代码的运行情况。虽然RPGMV本身会提供一个调试工具,按F8可以开启调试工具,但是这个工具是先启动游戏,再启动调试,然后我们才可以给目标代码设置断点。这个顺序不对,这样的顺序也不符合我们常见的软件开发,那我们就必须找到一个新的方法来启动MV项目代码。因此本小节问题还可以这样称呼:如何在不使用RPGMV这款软件来独立启动其附属的MV项目代码?
# 技术栈
VScode
+ Live Server
+ Chrome
# 配置流程
下面介绍下面介绍基本流程。下面的安装流程和相关操作可以打乱一下顺序。
# 下载代码编辑器VScode
从官网上下载,全称为Visual Studio Code
。点此进入官网 (opens new window)
# 下载浏览器Chrome
全称为Google Chrome
。点此进入官网 (opens new window)
# 下载VScode插件
在VScode
中下载软件插件Live Server
和Debugger for Chrome
。
# Live Server
具体截图如下:
# Debugger for Chrome
具体截图如下:
# 配置VScode的launch.json
在工程文件夹内找到文件夹.vscode
,若没有则手动创建。新增并修改launch.json
文件。
复制粘贴Debugger for Chrome
提供的代码并作出小改动,更改本地服务器端口号和调试器名称。
可参考的launch.json
配置写法如下:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
// 更多配置教程,请访问:
// https://www.bilibili.com/video/BV1jJ411c7zK
// https://www.bilibili.com/video/BV11A411n7Lq
// 版本号 暂无意义 直接复制粘贴即可
"version": "0.2.0",
"configurations": [
{
// 以Chrome浏览器来启动
"type": "chrome",
"request": "launch",
// 调试器名称 可以自己任意取名 尽量不要取名为空字符串
"name": "阮喵喵项目调试器(该名称在launch.json设置)",
// VScode 的 live server 插件所提供的默认本地服务器端口为5500。
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 配置VScode的Setting.json
在启动我们本地的web项目时,有时需要对Live Server
插件提供的端口号进行调整,比如说将预设值5500
调整成自己想要的其他数值。这时我们需要去settings.json
文件内进行修改。
假设你已经学会了用Live Server
启动web,并假设我们要设置的端口号为4399
。
首先,我们在本项目的.vscode
文件夹内新建一个与launch.json
文件并列的settings.json
。
在settings.json
中做以下配置:
{
"liveServer.settings.port": 4399,
"liveServer.settings.root": "/"
}
2
3
4
我们不仅要修改settings.json
的值,还要同步修改launch.json
内url
属性的值为http://localhost:4399
,这样我们才算是修改好了Live Server
的端口号。
点此阅读其他的参考文章。 (opens new window)
# 配置浏览器 非必要
找到装在电脑内的Google Chrome
,并在其属性状态栏内的快捷方式->目标栏中添加代码: –remote-debugging-port=9222
。注意在填写时要注意前面要加上空格。
# 视频参考
具体教学可以参考以下两个B站教程:
# 启动流程
下面介绍启动流程:
开启本地服务器 在
VScode
下启动Live Server
并开启本地服务器。点击调试 在
VScode
中找到debugger
栏,并选择debug
的工具。按F5运行/调试。
# 基本原理介绍与答疑
接下来介绍基本原理,并提出几个容易迷糊的问题。
# 为什么需要两个VScode插件?单独用一个Debugger for Chrome不行么?
我们的目的是为了在自己的电脑上面运行MV
项目,说稍微专业一点就是:在自己的电脑上面的本地服务器上启动能够访问本地文件的前端代码。而Debugger for Chrome
插件本身不提供建立本地服务器的功能,所以我们才要额外下载一个Live Server
插件来建立并启动本地服务器。
# 为什么要先启动Live Server再使用Debugger for Chrome?
只有先建立本地服务器才可以使用调试。建立本地服务器的最本质要求是,因为MV
项目的本质是一个前端网页游戏,还是一个会调用本地的.json
数据库文件的前端网页游戏,所以才需要建立本地服务器。只有本地服务器才可以调用本地文件。
# 为什么要额外设置VScode自动生成的launch.json?
launch.json
的本质是VScode
提供给项目的调试工具设置清单。只有先设置好这个清单内容,告诉VScode
我需要怎么样的调试工具,我们才可以用VScode
启动/调试MV代码。