VS CODE 配置 live server 和 Open PHP/HTML/JS In Browser 和PHP debug 及 javascript debugger 和launch.json 及

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}"        },    ]}

来源地址：https://blog.csdn.net/sitonn/article/details/128179838