WSL2 Ubuntu20.04 Laravel Sail & vscode安装xDebug

hi，我是温新，一名PHPer

保持热爱

windows11下，WSL Ubuntu20.04，使用Laravel Sail开发时，安装xDebug断点调试。使用 vscode 作为开发工具使用，只需要安装相关插件即可，需要多余的操作。

前提，假设已经有Laravel Sail的项目。

第一步：编辑 Dockerfile 文件

Dockerfile 文件中添加如下内容：

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">ARG XDEBUG</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 如果php安装了xdebug扩展</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 则可能不用添加如下命令</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">RUN</span> if [ ${XDEBUG}] ; then \</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    apt-get install -y php-xdebug; \</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">fi;</span>

第二步：修改 php.ini 文件

php.in 配置文件中添加 XDebug 配置

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">[<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">XDebug</span>]</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">zend_extension</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xdebug</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">so</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xdebug</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">mode</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">debug</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xdebug</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">discover_client_host</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">true</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xdebug</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">idekey</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">VSC</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xdebug</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">client_host</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">host</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">docker</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">internal</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">xdebug</span>.<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">client_port</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">9003</span></span>

第三步：修改 docker-compose.yml

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  laravel.test:</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    build:</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      context: ./docker/8.1</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      dockerfile: Dockerfile</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      args:</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        WWWGROUP: "${WWWGROUP}"</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        XDEBUG: ${SAIL_DEBUG}</span>

第四步： .evn添加配置

<span style="color: rgb(255, 192, 0);">SAIL_DEBUG=true</span> <br></br>

第五步：执行sail

<span style="color: rgb(255, 192, 0);">./vendor/bin/sail build --no-cache</span><br></br>

第六步：vscode 安装插件

vscode 安装 PHP Debug 插件

第七步： vscode 配置 launch.json 文件

launch.json 配置文件加追加如下配置：

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"name"</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"Listen for XDebug on WSL Sail"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"type"</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"php"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"request"</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"launch"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"port"</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">9003</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"pathMappings"</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">         <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"/var/www/html"</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"${workspaceFolder}"</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"hostname"</span>: <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"localhost"</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"xdebugSettings"</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">         <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"max_data"</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">65535</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">         <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"show_hidden"</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">1</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">         <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"max_children"</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">100</span>,</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">         <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(97, 175, 239) !important">"max_depth"</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">5</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     }</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span>

就这样配置完啦~