{"id":2289,"date":"2021-12-19T22:06:03","date_gmt":"2021-12-19T19:06:03","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2289"},"modified":"2021-12-19T22:28:26","modified_gmt":"2021-12-19T19:28:26","slug":"how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/","title":{"rendered":"How to Integrate and Use Xdebug with Visual Studio Code Editor on Docker at PHP Projects"},"content":{"rendered":"\n

When we develop software projects, most of our time is spent finding bugs. We usually use functions like var_dump(), echo, print_r()<\/strong> to find errors in PHP<\/strong>. Instead, we can run the step-by-step code in the code editor as in other languages such as JAVA, C#, and examine what values are in the variables and catch where the error is more quickly.<\/p>\n\n\n\n

In this post, I will explain how to integrate and use the PHP extension xdebug<\/a> in Visual Studio Code, Docker<\/strong> and PHP<\/strong> .<\/strong><\/p>\n\n\n\n

Although I used Docker<\/strong> in this post, you can install xdebug<\/strong> within the projects you keep in WAMP or XAMPP by following similar steps.<\/p>\n\n\n\n

Used Tools and Versions<\/h3>\n\n\n\n
  • PHP 8<\/li>
  • Xdebug 3<\/li>
  • Docker file 3.8<\/li>
  • Laravel 8<\/li>
  • Visual Studio Code<\/li>
  • MAC Computer<\/li><\/ul>\n\n\n\n

    Installing XDebug 3 Extension in PHP<\/h3>\n\n\n\n

    First the Xdebug 3<\/strong> PHP extension needs to be installed on the linux machine where we are running our project. For this, we add the following lines to Dockerfile<\/strong>.<\/p>\n\n\n\n

    # install and enable xdebug\nRUN pecl install xdebug \\\n    && docker-php-ext-enable xdebug\nCOPY compose\/api_php\/xdebug.ini \/usr\/local\/etc\/php\/conf.d\/docker-php-ext-xdebug.ini<\/pre><\/div>\n\n\n\n
    Our Laravel project is inside the api <\/strong>folder. We create the xdebug.ini<\/strong> file. As seen in the file above, we define the path of this file in Dockerfile. The file structure is as follows.<\/p>\n\n\n\n
    \"\"
    xdebug.ini file<\/figcaption><\/figure>\n\n\n\n
    zend_extension = xdebug.so\n# For xdebug 3\nxdebug.mode =debug, profile, trace\nxdebug.start_with_request = yes\nxdebug.client_port = 9003\nxdebug.client_host = 'host.docker.internal'\nxdebug.log_level = 0\nxdebug.remote_enable=1<\/pre><\/div>\n\n\n\n
    For our Laravel project<\/strong>, we define our api<\/strong> service in the yaml fil<\/strong>e as follows. Then we build our Docker image and launch our project.<\/p>\n\n\n\n
    # PHP Service For Laravel Application\n  api:\n    build:\n      context: .\n      dockerfile: .\/compose\/api_php\/Dockerfile\n    container_name: api_laravel\n    stdin_open: true\n    tty: true\n    depends_on:\n      - mariadb\n      - redis\n    volumes:\n      - .\/api:\/var\/www\/html\n    ports:\n      - "9000:9000"<\/pre><\/div>\n\n\n\n
    We run the <?php phpinfo(); ?> function in our project to see if the xdebug 3<\/strong> extension is installed correctly. On the screen that appears, we need to see the Xdebug v3.1.2 <\/strong>part as follows.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Visual Studio Code Installations for Xdebug 3<\/h3>\n\n\n\n
    First, we install the PHP Debug<\/strong> extension in the Visual Studio Code editor.<\/p>\n\n\n\n
    \"\"
    PHP Debug Extension<\/figcaption><\/figure><\/div>\n\n\n\n
    After installing the extension and opening our project with the VSC code editor, we click on the debug button on the left. If there is no launch.json<\/strong> file, the following screen appears. By pressing the Run and Debug<\/strong> button, we create the launch.json file.<\/p>\n\n\n\n
    \"\"
    Run and Debug Button<\/figcaption><\/figure><\/div>\n\n\n\n
    You will see the launch.json<\/strong> file inside the .vscode<\/strong> folder as seen in the picture below.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    We edit the launch.json <\/strong>file as follows. The left side<\/strong> of the values in the “pathMappings”<\/strong> key is the directory where our laravel project will stand on the server side that we defined in the Dockerfile. The right side<\/strong> is the directory of our laravel project in our locale.<\/p>\n\n\n\n
      "version": "0.2.0",\n    "configurations": [\n        {\n            "name": "Listen for Xdebug",\n            "type": "php",\n            "request": "launch",\n            "hostname":"0.0.0.0",\n            "port": 9003,\n            "pathMappings": {\n                "\/var\/www\/html":"${workspaceRoot}\/api" \/\/left side server that we map, right side locally worked side\n            },\n            "log": true\n        },<\/pre><\/div>\n\n\n\n
    Xdebug 3 Usage<\/h3>\n\n\n\n
    After making all the above adjustments and installing our Laravel project <\/strong>in Docker, we press the Debug button in VSC.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    After pressing the Debug button, the bottom of the VSC editor will turn orange<\/strong>.<\/p>\n\n\n\n
    \"\"
    Orange Bar in VSC when running Debug mode<\/figcaption><\/figure><\/div>\n\n\n\n
    In the last step, we mark the steps that we will debug in our PHP project (for example, line 6 in the code below). When we run the relevant page of our web project, if it reaches the debug point we marked as below, the code will stop at that point. Then we can debug it by running the code step by step. On the left side of VSC, we can see the variables and their values as in the picture below.<\/p>\n\n\n\n
    \"\"
    Debug Mode<\/figcaption><\/figure><\/div>\n\n\n\n
    I explained the xdebug3<\/strong> installation in the simplest and most detailed way.<\/p>\n\n\n\n
    Good luck\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"
    When we develop software projects, most of our time is spent finding bugs. We usually use functions like var_dump(), echo, print_r() to find errors in PHP. Instead, we can run the step-by-step code in the code editor as in other languages such as JAVA, C#, and examine what values are in the variables and catch […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[66,2],"tags":[],"yoast_head":"\nHow to Integrate and Use Xdebug with Visual Studio Code Editor on Docker at PHP Projects - blog website<\/title>\n<meta name=\"description\" content=\"When we develop software projects, most of our time is spent finding bugs. We usually use functions like var_dump(), echo, print_r() to find errors in PHP. Instead, we can run the step-by-step code in the code editor as in other languages such as JAVA, C#, and examine what values are in the variables and catch where the error is more quickly.In this post, I will explain how to integrate and use the PHP extension xdebug in Visual Studio Code, Docker and PHP .Although I used Docker in this post, you can install xdebug within the projects you keep in WAMP or XAMPP by following similar steps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Integrate and Use Xdebug with Visual Studio Code Editor on Docker at PHP Projects - blog website\" \/>\n<meta property=\"og:description\" content=\"When we develop software projects, most of our time is spent finding bugs. We usually use functions like var_dump(), echo, print_r() to find errors in PHP. Instead, we can run the step-by-step code in the code editor as in other languages such as JAVA, C#, and examine what values are in the variables and catch where the error is more quickly.In this post, I will explain how to integrate and use the PHP extension xdebug in Visual Studio Code, Docker and PHP .Although I used Docker in this post, you can install xdebug within the projects you keep in WAMP or XAMPP by following similar steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-19T19:06:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-19T19:28:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/Ekran-Resmi-2021-12-19-20.36.07-1-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/Ekran-Resmi-2021-12-19-20.36.07-1-1.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/Ekran-Resmi-2021-12-19-20.36.07-1-1.png\",\"width\":1618,\"height\":654},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/\",\"name\":\"How to Integrate and Use Xdebug with Visual Studio Code Editor on Docker at PHP Projects - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/#primaryimage\"},\"datePublished\":\"2021-12-19T19:06:03+00:00\",\"dateModified\":\"2021-12-19T19:28:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"When we develop software projects, most of our time is spent finding bugs. We usually use functions like var_dump(), echo, print_r() to find errors in PHP. Instead, we can run the step-by-step code in the code editor as in other languages such as JAVA, C#, and examine what values are in the variables and catch where the error is more quickly.In this post, I will explain how to integrate and use the PHP extension xdebug in Visual Studio Code, Docker and PHP .Although I used Docker in this post, you can install xdebug within the projects you keep in WAMP or XAMPP by following similar steps.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/19\/how-to-integrate-and-use-xdebug-with-visual-studio-code-editor-on-docker-at-php-projects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Integrate and Use Xdebug with Visual Studio Code Editor on Docker at PHP Projects\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2289"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=2289"}],"version-history":[{"count":59,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2289\/revisions"}],"predecessor-version":[{"id":2375,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2289\/revisions\/2375"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}