(20210104追記)
※本記事はxdebugのバージョンが2.xでのやり方です
現在の最新のバージョンは3.xになってまして、php.iniの設定の仕方が少し違います
結構記事ありますので3.xの方は別の記事を参照してください。

ようやく止まった

ようやく止まった・・

こんにちはkamotetuと申します

普段仕事ではPhpStormというエディタで作業しているのですが、自宅ではVSCodeを使用しています
それでようやくVSCodeでブレークポイントで止まってくれたので記事にしたいと思います

というても
https://qiita.com/gigosa/items/90431be7a6a79db78480
を参考に（ほとんど同じ）でやったので、設定などは↑の記事を参考にしてください(いや本当助かりました)

じゃあお前なんなん？

て感じですが、実際に止まったときのVSCodeの状況をほんのちょっと詳しめに紹介します
(ようは嬉しかったので記事にした感じです(￣▽￣;))

*「実際に止まらせる」まで紹介させていただいた記事とほぼ一緒です
*単にVSCodeの動きを見たい方は「実際に止まらせる」から読んでください

os:mac

自分のディレクトリ構成
(記事に必要な分だけ記載します)

app //<- この中にlaravelのファイル郡が入ってます
docker
   ┗ php
     ┝ Dockerfile
     ┗ php.ini
docker-compose.yml

とりあえず

紹介した記事のとおりやっていきます

Dockerfileを作成

自分は

FROM php:7.3-apache-stretch

RUN apt-get update && \
    apt-get install -y libzip-dev zlib1g-dev sudo nano && \
    docker-php-ext-install mysqli pdo_mysql zip && \
    a2enmod rewrite

RUN pecl install xdebug \
  && docker-php-ext-enable xdebug

こんな感じで作成しました

docker-compose.ymlを作成

docker-compose.yml

version: "3.4"

services:
  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    restart: always
    volumes:
      - ./docker/php/php.ini:/usr/local/etc/php/php.ini
      - ./app:/var/www/html/
    ports:
      - 8080:80
    depends_on:
      - mysql
      - mail
      
  mysql:
    image: mysql:5.7
    restart: always
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
    command:
      - --sql-mode=NO_ENGINE_SUBSTITUTION
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=${DB_DATABASE}
      - MYSQL_USER=${DB_USERNAME}
      - MYSQL_PASSWORD=${DB_PASSWORD}

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: always
    volumes:
      - ./docker/phpmyadmin/sessions:/sessions
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql
      - PMA_USER=${DB_USERNAME}
      - PMA_PASSWORD=${DB_PASSWORD}
    ports:
      - 4040:80
    depends_on:
      - mysql
  mail:
    image: mailhog/mailhog
    restart: always
    ports:
      - "8025:8025"

mysql以下は今回無視してください

php.ini作成

php.ini

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
mbstring.http_output = UTF-8
mbstring.encoding_translation = Off
mbstring.detect_order = auto
display_errors = On

upload_max_filesize = 20M
post_max_size = 20M
max_execution_time = 1200
memory_limit = 512M

[xdebug]
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=host.docker.internal
xdebug.remote_port=9000 //<-記事では9001になっています
xdebug.remote_log=/tmp/xdebug.log

[xdebug]以下は記事のコピペ

VSCodeの設定

ひとまずPHP Debugをインストール（画面ではインストール済）

虫のアイコンをクリック

自分のVSCodeではこんなアイコン
バージョン？によっては違うアイコンになってると思いますが、明らか虫だろってアイコンがあればそれと同じです（多分）
これをクリックすると、「~~~.jsonを作成」というリンク？が表示されるのでそれをクリック（画像撮り忘れてしまいましたすいません）

launch.jsonを編集
クリックした先に

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        },
//上はもともと作成されている（はず）
//以下は記事のコピペ
        {
            "name": "XDebug on docker",
            "type": "php",
            "request": "launch",
            "port": 9000, //<- php.iniのxdebug.remote_portと同じポート番号
            "pathMappings": {
                "/var/www/html":"/Users/ユーザーの名前/Documents/my_app/laravel_app/app/app" <- dockerのルートディレクトリとアプリケーションのローカルルートディレクトリを設定します
            }
        }
    ]
}

とりあえずこれで設定は完了

実際に止まらせる

虫のアイコンをクリックすると↑のような画面になりますが、画像のように「Xdebug on docker」を選択してください

で、その左にある再生ボタンをクリックすると

こんなメニューが表示されます

次にブレークポイントを設定します

適当な位置にブレークポイントを設定します（コードの行番号の左にカーソルを持っていくと選択できます。あと、箇所によっては止まらないかも）

この状態でブラウザでブレークポイントを通過する処理を実行します
（自分のルーティングでは「http://localhost:8080/public/article/store」）
すると

こんな感じで止まってくれました

ありがたや

止まらなかったら

止まるまでいろんな記事を参考にトライするのみです！

おやすみなさい