VScode+Live Service+Five Service实现php实时调试

VScode+Live Service+Five Service实现php实时调试

一、VScode插件安装及配置

1.Code Runner

settings.json设置（打开方式：ctrl+p，搜索settings.json）

设置php为绝对路径（注意路径分隔符为\\或/）

2. Live Server

settings.json设置:

  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.port": 5500,
  "liveServer.settings.ChromeDebuggingAttachment": false,

3. Live Server(Five server)

settings.json设置:

  "fiveServer.host": "127.0.0.1",
  "fiveServer.php.executable": "D:\\phpstudy_pro\\Extensions\\php\\php7.4.3nts\\php.exe",
  "fiveServer.ignore": [],

fiveServer.php.executable设置为php绝对路径

4.Open PHP/HTML/JS In Browser

settings.json设置:

  "open-php-html-js-in-browser.documentRootFolder": "D:/phpstudy_pro/WWW",
  "open-php-html-js-in-browser.selectedBrowser": "Chrome",
  "open-php-html-js-in-browser.urlToOpen": "custom",
  "open-php-html-js-in-browser.customUrlToOpen": "http://${relativeDirnameDocumentRoot}/${fileBasename}",

使用Open PHP/HTML/JS In Browser右键在浏览器中打开路径不对则需要修改open-php-html-js-in-browser.customUrlToOpen

注意，如果常用浏览器不是Chrome，则需要将上述浏览器配置改为对应的浏览器

二、Chrome浏览器插件安装及配置

1.插件下载

打开Chrome浏览器扩展设置中的开发者模式

进入Chrome插件应用商店下载 Live Server Web Extension

无法进入Chrome插件应用商店，可用该网盘链接：

百度网盘：
链接：https://pan.baidu.com/s/1-7zWuq_MNV8NoPUZgHpZug?pwd=gwcu
夸克网盘：
链接：https://pan.quark.cn/s/b3e2ba83309a

下载到电脑后选择加载已解压的扩展程序

2.插件配置

其中Actual Server Address是正在进行项目的自定义网址，如test.cc

Live Server Address是VScode Live Service插件定义的ip和端口

三、实现php实时调试

开启两个Go Live

浏览器插件为打开状态

对php文件右键使用Open PHP/HTML/JS In Browser打开

实现实时调试