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": [
                "<node_internals>/**"
            ],
            "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}"
        },

    ]
}