VS CODE 配置 live server 和 Open PHP/HTML/JS In Browser 和PHP debug 及 javascript debugger 和launch.json 及settings.josn 实现了 非常方便的 HTML 和PHP 及 JS 实时调试。文件如下。
安装的插件如下：全都需要装，不要少
调试HTML用live server 实时显示调试。调试HTML 内外链的JS 时，要先启用live server 再 用"F5 JS HTML Launch Chrome against localhost 后，直接按 F5打开chrom.
先配置PHP 调试环境
"php.validate.executablePath":"D:\\phpstudy_pro\\Extensions\\php\\php7.3.4nts\\php.exe", "php.debug.executablePath": "D:\\phpstudy_pro\\Extensions\\php\\php7.3.4nts\\ext\\php_xdebug.dll",再配置 code-runner 支持PHP和html 用360以绝对路径打开。
"code-runner.executorMap": { "php": "D:\\phpstudy_pro\\Extensions\\php\\php7.3.4nts\\php.exe", "html": "\"C:\\Users\\Administrator\\AppData\\Roaming\\360se6\\Application\\360se.exe\"",open-php-html-js-in-browser 的配置。用Chrom以localhost网址打开。
"open-php-html-js-in-browser.documentRootFolder": "D:/phpstudy_pro/WWW/", "open-php-html-js-in-browser.selectedBrowser": "Chrome",liveServer的配置关键点
"liveServer.settings.host": "localhost", "liveServer.settings.CustomBrowser": "chrome",
各自的界面 设置
liveserver 工作区 主要设置 localhost 和chrome
open-php-html-js-in-browser主要设置，打开URL 和本地绝对路径及打开浏览器为Chrome
settings.json 配置文件如下。
{ "php.validate.executablePath":"D:\\phpstudy_pro\\Extensions\\php\\php7.3.4nts\\php.exe", "php.debug.executablePath": "D:\\phpstudy_pro\\Extensions\\php\\php7.3.4nts\\ext\\php_xdebug.dll", "code-runner.saveFileBeforeRun": true, "code-runner.executorMap": { "php": "D:\\phpstudy_pro\\Extensions\\php\\php7.3.4nts\\php.exe", "html": "\"C:\\Users\\Administrator\\AppData\\Roaming\\360se6\\Application\\360se.exe\"", "javascript": "node", "java": "cd $dir && javac $fileName && java $fileNameWithoutExt", "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", // "php": "php", "python": "python -u", "perl": "perl", "perl6": "perl6", "ruby": "ruby", "go": "go run", "lua": "lua", "groovy": "groovy", "powershell": "powershell -ExecutionPolicy ByPass -File", "bat": "cmd /c", "shellscript": "bash", "fsharp": "fsi", "csharp": "scriptcs", "vbscript": "cscript //Nologo", "typescript": "ts-node", "coffeescript": "coffee", "scala": "scala", "swift": "swift", "julia": "julia", "crystal": "crystal", "ocaml": "ocaml", "r": "Rscript", "applescript": "osascript", "clojure": "lein exec", "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt", "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt", "racket": "racket", "scheme": "csi -script", "ahk": "autohotkey", "autoit": "autoit3", "dart": "dart", "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt", "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt", "haskell": "runhaskell", "nim": "nim compile --verbosity:0 --hints:off --run", "lisp": "sbcl --script", "kit": "kitc --run", "v": "v run", "sass": "sass --style expanded", "scss": "scss --style expanded", "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css", "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "sml": "cd $dir && sml $fileName" }, "open-php-html-js-in-browser.documentRootFolder": "D:/phpstudy_pro/WWW/", "open-php-html-js-in-browser.selectedBrowser": "Chrome", "editor.renderWhitespace": "all", "editor.unicodeHighlight.ambiguousCharacters": false, "debug.javascript.autoAttachFilter": "always", "liveServer.settings.host": "localhost", "liveServer.settings.CustomBrowser": "chrome",}launch.json 文件 配置了三种方式的调试 node.js 在VS输入调试。PHP的 debug 和 F5键直接调试HTML外链的JS 端口号要设置的跟live server一致。
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Launch JS Program", "program": "${workspaceFolder}/${relativeFileDirname}/${fileBasename}", "request": "launch", "skipFiles": [ "/**" ], "type": "node" }, { "name": "监听 Xdebug open PHP", "type": "php", "request": "launch", "port": 9000 }, { "type": "chrome", "request": "launch", "name": "F5 JS HTML Launch Chrome against localhost", "url": "http://localhost:5500/${relativeFileDirname}/${fileBasename}", "webRoot": "${workspaceFolder}" }, ]} 
