{"componentChunkName":"component---src-templates-blog-template-js","path":"/blog/xdebug-docker-setting","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"path\": \"/blog/xdebug-docker-setting\",\n  \"date\": \"2020-07-03\",\n  \"title\": \"Setting Xdebug dengan Laradock Docker & PHPstorm IDE\",\n  \"banner\": \"./images/banner-xdebug.png\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Ini merupakan tulisan pertama saya yang bersifat pembahasan teknis. Tulisan ini saya dedikasikan kepada \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/hendisantika\"\n  }), \"Kang Hendi\"), \". Beliau merupakan sponsor saya. Beliau mempercayakan klaim lisensi PHPstorm kepada saya untuk digunakan dalam produktifitas Development harian. InsyaAllah development kedepan bisa lebih produktif dengan PHPstorm.\"), mdx(\"p\", null, \"Debugging memang hal cukup asing khususnya di ranah PHP development. Kebanyakan pemula (tidak terlepas saya juga) sering menggunakan metode sederhana dalam menganalisa kode, menemukan bug dan mengatasi error logic pada kode. Metode \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var_dump()\"), \" dan bahkan mungkin \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"echo\"), \" masih menjadi pilihan. Cara tradisional, namun mudah dan cukup populer. Nah, agar kita bisa menjadi developer yang baik dan benar, kita perlu mencari cara memudahkan hidup kita sendiri\\uD83D\\uDE04. Salah satunya dengan menerapkan teknik debugging.\"), mdx(\"p\", null, \"Mengingat Xdebug memerlukan pengaturan khusus untuk bisa terintegrasi ke IDE populer zaman now macam Vscode dan PHPStorm, perlu adanya tutorial detail integrasi Xdebug ini. Pada artikel ini, saya akan coba jelaskan langkah-langkah integrasi Xdebug dengan kombinasi Docker dan PHPStorm IDE. Hal mendasar mengapa perlu adanya tutorial secara jelas dan lengkap ialah berdasarkan pada pengalaman pribadi saya.\"), mdx(\"p\", null, \"Beberapa minggun ini saya berkutat dengan konfigurasi Xdebug. Saya coba mengumpulkan beberapa informasi. Istilah kerennya research\\uD83D\\uDE01. Beberapa tutorial memang bagus dan to the point. Namun, ada Beberapa hal yang mungkin terlihat sepele tapi jarang disebutkan secara jelas.\"), mdx(\"p\", null, \"Tak kenal maka tak tahu\\uD83D\\uDE06. Mari kita berkenalan dulu dengan Xdebug.\"), mdx(\"h2\", null, \"Apa itu Xdebug?\\uD83E\\uDD14\"), mdx(\"p\", null, \"Masih asing dengan istilah di atas? tidak masalah. Saya akan coba sederhanakan. Dari kata tersebut saya yakin Anda pasti dapat menebak. Yap, Anda benar. Xdebug berkorelasi dengan aktifitas debugging. Developer PHP veteran pastilah tidak asing dengan yang satu ini. Partner wajib PHP developer dalam berperang melawan kode bandel\\uD83D\\uDE05. Kode bandel biasanya disebabkan oleh diri kita sendiri. Jadi, sebenarnya saya mengajak Anda untuk melawan diri Anda sendiri agar lebih baik dalam menulis kode lewat debugging yang baik dan benar.\"), mdx(\"p\", null, \"Anda ingin definisi resmi? Oke. Mari kita berkunjung ke laman resminya.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/531b07cf8e3ad24083ae43ba5b287618/b5dee/xdebug.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"53%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAACGUlEQVQoz21RS2/TQBjMP6SIihCKeuGhNFUpQjwCJ26cOHBASGkRIIrEgQN3krZnEIISBII8KlHb8TtZ767X72G9JhFVWGk83+pbj75vptZst7DR3sTdh21s3G/i0vZFNLZXcX7rDOrXV3BBor61ouoKZxWv36pj7eYq1u80cPneGtZv19G4cQ61A/0J3h49xeM3D3D4cw9d4xGeHV3D835TcefTFbz81sTul6sKL/pVvfejJbGp+NX3luLX8l7rmz181g7xYfgeX/UDfNTfYX+0i96oI7GD7rCD/fEOesMKZa876Pzty558U/ZLLu81/OfEUYqAUFDCQAMOFoQglMBjHnzmI07j6mGx/G+tKHKISCCKIgURC4QiBGNSjNIF4iRSQoxTcM6QZ/lCpCiKBdSEnufBMAzotgbNP4Hh6TBNE7qug4dcCeZ5jjRNcTw+xmD0CyfOb/jcg0jEKVElSAOKiTmBQ2yYUwOWY4EzjjRJFearlYK+P4VPfBgzDRaZIIz5suCMzNR0pmvClmKKPRuOb8OStR/4UrNAkiTQNR2GpWPsDNQ2LGILQeVh+XFnLsbaCLqhKT/DlCNMKog0BI0CZHmGLMtACEHACFzqYMqrgEqtUxMGQQDLllNRC0xQtW7IhTRfJhzRhflZLleWSbuBDY+6SLNUeVtiPmVt7k0UlylG0pMQQlSpq/Sl6XmRL6U5X/HfpMvzB/xnEwMz/9u7AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"xdebug mainwebsite screenshoot\",\n    \"title\": \"xdebug mainwebsite screenshoot\",\n    \"src\": \"/static/531b07cf8e3ad24083ae43ba5b287618/e17e5/xdebug.png\",\n    \"srcSet\": [\"/static/531b07cf8e3ad24083ae43ba5b287618/7e516/xdebug.png 100w\", \"/static/531b07cf8e3ad24083ae43ba5b287618/772e8/xdebug.png 200w\", \"/static/531b07cf8e3ad24083ae43ba5b287618/e17e5/xdebug.png 400w\", \"/static/531b07cf8e3ad24083ae43ba5b287618/0a47e/xdebug.png 600w\", \"/static/531b07cf8e3ad24083ae43ba5b287618/5a190/xdebug.png 800w\", \"/static/531b07cf8e3ad24083ae43ba5b287618/b5dee/xdebug.png 1237w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Xdebug is an extension for PHP to assist with debugging and development.\"), mdx(\"ul\", {\n    parentName: \"blockquote\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It contains a single step debugger to use with IDEs\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"it upgrades PHP's var_dump() function\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"it adds stack traces for Notices, Warnings, Errors and Exceptions\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"it features functionality for recording every function call and variable assignment to disk\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"it contains a profiler\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"it provides code coverage functionality for use with PHPUnit\"))), mdx(\"p\", null, \"Berdasarkan kutipan di atas, kita bisa coba sederhanakan, xdebug merupakan penunjang debugging pada development PHP. Xdebug ini hadir dalam bentuk ekstensi. Jadi defaultnya, dia tidak tersedia saat install PHP. Pada tutorial kali ini, saya akan menggunakan Docker.\"), mdx(\"h2\", null, \"Kenapa Docker?\\uD83E\\uDD14\"), mdx(\"p\", null, \"Saat ini docker sudah mulai banyak dilirik developer. Alasannya? saya pribadi sih pilih docker karena fleksibelitas. Terkadang kita butuh lingkungan pengembangan yang berbeda. Misal, kita butuh PHP 5 untuk development apliksai A. di sisi lain, kita juga develop aplikasi B dengan minum versi PHP 7. Dengan Docker kita bisa switch lingkungan pengembangan dengan mudah tanpa saling intervensi.\"), mdx(\"p\", null, \"Saya sendiri memakai \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://laradock.io\"\n  }), \"Laradock\"), \" untuk aktifitas pengembangan PHP sehari-hari. Docker tidak akan secara detail dibahas di sini. Saya asumsikan Anda sudah familiar dengan docker Development. Anda bisa mengunjungi laman resmi dokumentasi \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://docs.docker.com/get-docker/\"\n  }), \"Docker\"), \" untuk memulai menerapkan development berbasis Docker.\"), mdx(\"p\", null, \"Secara prinsip, konfigurasi Xdebug dari docker maupun tanpa docker sama. Karena memang Fokusnya bukan pada Dockernya, namun pada konfigurasinya. Pastikan dulu Xdebug telah terintegrasi ke PHP yang anda gunakan. Anda bisa periksa apakah Xdebug sudah terintegrasi dengan PHP yang anda pakai. Anda bisa memanfaat native API PHP \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"phpinfo()\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b1eb30e73ec0a30068b481379920d19a/8698d/phpinfo.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"62%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAABtklEQVQoz42RWVPCQBCE+f+/QinffBXLo0AiSAxByG6uDZgDAQHB68XiTDu7goon2erayVTNVz29Gay+x4cZPO8JvjeG8O8RhS9ote4RRnewnTYYjxHFYwRBD0nygCR+U3g9wvPTZI1BZj5fqCIMh7i8vEG9fotarQvLGqFiCGi6CaPukGxUTAtGjcNxYlIC103AWIheb4SUzmKxQGa5TBUwCIY4OYmQz1/j9LQFTeugUBAontkol3yUSh4uLgJoRY5yWeD83FU9TfMQRQPFSNP0A9hodJHNXiGXSwg4JNgjqYVqlZxVLFIDVdMlKLk0HPWv6xaJUwS970DO+9jbaxAwptUnpCXB2mg2XcoyoFtKwLYZfF/2mqovhIvBoP8zMJut4eioQ7ApOZjRnahh3xckn4YFZcsou3VPqLrf/wHI2C12d00cHETK4RroefYXoEUP4qha6legdCiB+fyQMpopoGG0aZirwTWQc05r2/8DpcOdnerK4fQTkG0AGWMKurVDCZQOdX2+WlmuF7wDJHDrleUrHx4mXzJ0NjLcGui6I+zvCxwfdxVQOjTNDvXtDYcyv7+Ar43sWpFi09cnAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpinfo\",\n    \"title\": \"phpinfo\",\n    \"src\": \"/static/b1eb30e73ec0a30068b481379920d19a/e17e5/phpinfo.png\",\n    \"srcSet\": [\"/static/b1eb30e73ec0a30068b481379920d19a/7e516/phpinfo.png 100w\", \"/static/b1eb30e73ec0a30068b481379920d19a/772e8/phpinfo.png 200w\", \"/static/b1eb30e73ec0a30068b481379920d19a/e17e5/phpinfo.png 400w\", \"/static/b1eb30e73ec0a30068b481379920d19a/0a47e/phpinfo.png 600w\", \"/static/b1eb30e73ec0a30068b481379920d19a/5a190/phpinfo.png 800w\", \"/static/b1eb30e73ec0a30068b481379920d19a/8698d/phpinfo.png 1239w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Screenshoot diatas merupakan hasil dari phpinfo yang mana Xdebug berstatus enabled. Xdebug siap dikonfigurasi bersama IDE PHPStorm.\"), mdx(\"h2\", null, \"PHPStorm? Why Not Vscode?\\uD83E\\uDD14\"), mdx(\"p\", null, \"Sebenarnya saya sudah mencoba keduanya. Menurut saya pribadi konfigurasinya hampir sama. Yang membedakan ialah PHPStorm lebih user friendly. Semua konfigurasi Xdebug tersedia dalam bentuk UI yang memudahkan pengguna. Vscode lebih fleksibel karena kita menulis langsung konfigurasi dalam satu File khusus.\"), mdx(\"h2\", null, \"Let's Do the Thing \\uD83D\\uDCBB\"), mdx(\"p\", null, \"Pastikan anda sudah menyiapkan Laradock pada lokal komputer anda. Jika belum, coba ikuti langkah langkahnya \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://laradock.io/getting-started/\"\n  }), \"disini\"), \". Laradock memakai command \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker-compose\"), \" untuk administrasi semua docker containernya. Langkah yang paling mudah ialah melakukan eksekusi command pad terminal \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker-compose up -d mysql apache2 phpmyadmin\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f94359cc42015596f7cdcfbd9b0680ef/ef6b9/docker-compose.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"18%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAAt0lEQVQY042Ou07DQBRE713vsmutiZ11QoIibBCPSBRU0NIlKKJKmRT8/18crix6UhxNMaOjkZu3e5avG7r3D8rhh7I7UfZnyteZ3vJzP3DYJY7fmedR0azETvFNhcuBqosTvqQJCUNDuDM2kTh6wkoJt46wVhsKsrRRaZA2IyL/Uz/NqbeF+qUnPVpuF4RFRtMV/jrQjvZEhcoJ6i4QxnFGemhN1hGHmYnn+D5NpYv2tNHLnv3xC1xxW9ZLTpdcAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"docker compose\",\n    \"title\": \"docker compose\",\n    \"src\": \"/static/f94359cc42015596f7cdcfbd9b0680ef/e17e5/docker-compose.png\",\n    \"srcSet\": [\"/static/f94359cc42015596f7cdcfbd9b0680ef/7e516/docker-compose.png 100w\", \"/static/f94359cc42015596f7cdcfbd9b0680ef/772e8/docker-compose.png 200w\", \"/static/f94359cc42015596f7cdcfbd9b0680ef/e17e5/docker-compose.png 400w\", \"/static/f94359cc42015596f7cdcfbd9b0680ef/0a47e/docker-compose.png 600w\", \"/static/f94359cc42015596f7cdcfbd9b0680ef/5a190/docker-compose.png 800w\", \"/static/f94359cc42015596f7cdcfbd9b0680ef/ef6b9/docker-compose.png 832w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Perintah ini akan melakukan pengecekan apakah container docker sudah ada atau belum pada lokal komputer. Jika belum ada, docker akan mengunduh image yang dibutuhkan kemudian melakukan build sesuai resep \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://docs.docker.com/engine/reference/builder/\"\n  }), \"Dockerfile\"), \" yang ada. Jika kita perhatikan, folder Laradock akan berisi banyak folder dengan resep Dockerfile masing-masing. Dalam hal ini, kita hanya memerlukan service mysql, apache2 dan phpmyadmin. Perintah \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"-d\"), \" akan membuat service container berjalan dilatar belakang dalam mode \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"detach\"), \". Pada mode ini, service container akan tetap berjalan dan Anda bisa beraktifitas kembali menggunakan terminal. Tanpa command \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"-d\"), \" posisi terminal Anda akan terus memantau service container dan jika Anda menekan key \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ctr + c\"), \", container anda Akan berhenti.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b4ddd4484bd8d1c257761ddcd8af6673/21b4d/laradock-dir.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"61%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACfklEQVQozy2SW2/TQBCF/ZsQSRPbe/PaseP73Y6TJr3RViBAQiDEAw9VJR75y4fZLQ+jtdfjme+cGWduU4RK4HqecHNacBh6zH2HqW+RJzvsoxB5nqPYJ/Ss/0eIgr695baYuxaXecBUl3CGfkZdVJD1DDneIJpvodoF6vQMP63Bp3tI896fwIcbsKxBePkEUXQIKVePF6hmxt8/r4gkgzMNIyoqmCUxmjyFKwIIFWAeOkREfqDTlwGY0jgvM6JAwY/28LkADyL4dM+kwvPdBWK7hnOcF+x3Mc7TgF+fn7HNOuiqx8uPr+iLFC/fv0CWPXg14ffXjxiaGsHxEUHRYDedEfZHSKJ9/fkN2t/C6dseRRyDUVeet2BxDr4jX4drCDqD9gAeZ+BJbuX6ekdye7Awhkgrui8sMStHbDYbKtiNKNMUMkog9oUNFiZQ1NUjqSpvIKigSEzkVqKmZpwKBlkNaf4xAM0I1xRs6xYJ+SL2pTVX1hOEMX6iAVCi+dlIltUA2RwQZSVejQ1UXFK+MvmkLJzv4LoenCxOEAoBXygwkmMkmSEoauAxbq1QO4o4tSScBrCMvR2KR0NhIeWr0NJv1is4jKr6qxUkUanuaFdGEJE+PICRP3q6fSMhOrM6jBrJ4xM4rZTJlzZ/gF4+YOv5cKTPwEk7J2+EjiCoI6e1EUTkE6EhM8TGT27o6U5nFRgp4pZOwxMSkvI2q/dwhEcFr9bwkhKsPsAvJ/hZi2i5t5PV5GVAhLpbEI5nO9no9GRPTcQhhW7Ix/kBW4KzhO76Ch0t9VRmWNoSVRJhG9GSE41ZCeOVb/yiZ5cJa4XLJfkd241gQYjH0wy2eod/EG+/+wVs0MkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Laradock dir\",\n    \"title\": \"Laradock dir\",\n    \"src\": \"/static/b4ddd4484bd8d1c257761ddcd8af6673/e17e5/laradock-dir.png\",\n    \"srcSet\": [\"/static/b4ddd4484bd8d1c257761ddcd8af6673/7e516/laradock-dir.png 100w\", \"/static/b4ddd4484bd8d1c257761ddcd8af6673/772e8/laradock-dir.png 200w\", \"/static/b4ddd4484bd8d1c257761ddcd8af6673/e17e5/laradock-dir.png 400w\", \"/static/b4ddd4484bd8d1c257761ddcd8af6673/0a47e/laradock-dir.png 600w\", \"/static/b4ddd4484bd8d1c257761ddcd8af6673/5a190/laradock-dir.png 800w\", \"/static/b4ddd4484bd8d1c257761ddcd8af6673/21b4d/laradock-dir.png 1280w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Untuk mengetahui apakah docker container berjalan dengan baik, Anda bisa melakukan eksekusi command\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker-compose ps\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d49beb415e50905aa0c281202db9a556/0d98f/docker-ps.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"13.999999999999998%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsSAAALEgHS3X78AAAAqUlEQVQI10WOyQ7CMAxE7SxOmraBVHCoWuAECIo4wQXE/3/WYAoShydv47EpjwXNcUJ9eSGdHmivT0y3Ne5nxqp3sEslWZAz4A/+i0kOHLRvGWwNXPCQ4ECybSFD1AVSEUE2ATy0oK7WoYMrEWGXVdOoeYDNMhuxWJioBoZBRH+kryFjVpGHqfTKkOF10bVai17uIqpDQdwX2EWYP5uJalj9co22UX3yeANRFkMU0/7QrQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Laradock dir\",\n    \"title\": \"Laradock dir\",\n    \"src\": \"/static/d49beb415e50905aa0c281202db9a556/e17e5/docker-ps.png\",\n    \"srcSet\": [\"/static/d49beb415e50905aa0c281202db9a556/7e516/docker-ps.png 100w\", \"/static/d49beb415e50905aa0c281202db9a556/772e8/docker-ps.png 200w\", \"/static/d49beb415e50905aa0c281202db9a556/e17e5/docker-ps.png 400w\", \"/static/d49beb415e50905aa0c281202db9a556/0a47e/docker-ps.png 600w\", \"/static/d49beb415e50905aa0c281202db9a556/5a190/docker-ps.png 800w\", \"/static/d49beb415e50905aa0c281202db9a556/0d98f/docker-ps.png 1276w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h2\", null, \"Touch the .env File\"), mdx(\"p\", null, \"Seperti yang saya sebutkan di awal, Xdebug merupakan ekstensi. Jadi kita harus terintegrasi dengan PHP. Sama dengan Laradock, Xdebug belum terintegrasi. Semua konfigurasi dan Administrasi container docker ada dalam satu single file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".env\"), \". Banyak parameter yang bisa Anda atur, termasuk integrasi Xdebug. Silahkan buka file .env di dalam folder Laradock. Ada 2 parameter yang harus Anda ganti nilainya menjadi \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \" yaitu \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"PHP_FPM_INSTALL_XDEBUG\"), \" dan \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"WORKSPACE_INSTALL_XDEBUG\"), \". Apa sebenarnya ini? parameter ini akan mengirim perintah saat build container PHP untuk mengaktifkan Xdebug. Kenapa 2 parameter yang dibutuhkan? Menurut sumber resminya pada laman official Laradock, kita memang harus mengganti 2 parameter tersebut. Namun saya belum paham mengapa. Asumsi saya container workspace ini dibutuhkan pada internal eksekusi docker container Laradock.\"), mdx(\"p\", null, \"Karena kita memelakukan perubahan pada parameter \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".env\"), \", container kita perlu dibuat ulang agar perubahan terbaru dapat diterapkan. Lakukan eksekusi \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker-compose build workspace php-fpm\"), \" untuk membuat kembali container php-fpm dan workspace. Jika berhasil, Anda seharusnya dapat melihat Xdebug aktif pada \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"phpinfo()\"), \".\"), mdx(\"h2\", null, \"Konfigurasi xdebug.ini\"), mdx(\"p\", null, \"Selanjutnya, kita konfigurasi file \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xdebug.ini\"), \" agar container dapat menerima perintah-perintah yang dimengerti Xdebug. File konfigurasi ini ada pada 2 tempat. Sama Seperti pada .env di atas, kita harus konfigurasi untuk container php-fpm dan workspace.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c46b6d0541a510221a020218acad8aca/96638/xdebug-ini.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"42%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsSAAALEgHS3X78AAABX0lEQVQoz2WR2XqDIBSEfYy4JK4oqOCCmKVm+bpc5f2fZ3ogNV/aXgwcFOb8Ax7nHG3ToK4FtB4hBIeSEkPfuW9KKTT0fxxHWtfoug6ybcC6I1SvMU0aZVkiSRJkWQZvt9shLUowIVHwFllZIy8FcqrtHMc7RFHkDri9aeoMrtcb7vc7lmWBMeYpL7abagk+XSHmTwjzjmo8Q0wXqPkCbfbgvIIguqqqnOF2u3UNbG2bvMqL4xhJwVC0howWVP0JTM4U6YBmmDHuF+yPJ3QUXdJV2FjW0MqSr/UqLyHDlDFnIMztQafP6A9X3D6+0KgBQRjB32zg+z6CIHBGf8l+E7IKTFE0fXGUfDihN29YzhcYunRBkVuiWx9FCOFoVpN/hJlokLea4h5REimTBgU1qNSEox4wygYFpSjy3D1ITvOr4S9CO1jKKAye2kYh6VEHQYiQIkY/CsPwGXmlejX8Bmna6EByPSQeAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"xdebug ini\",\n    \"title\": \"xdebug ini\",\n    \"src\": \"/static/c46b6d0541a510221a020218acad8aca/e17e5/xdebug-ini.png\",\n    \"srcSet\": [\"/static/c46b6d0541a510221a020218acad8aca/7e516/xdebug-ini.png 100w\", \"/static/c46b6d0541a510221a020218acad8aca/772e8/xdebug-ini.png 200w\", \"/static/c46b6d0541a510221a020218acad8aca/e17e5/xdebug-ini.png 400w\", \"/static/c46b6d0541a510221a020218acad8aca/96638/xdebug-ini.png 556w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Konfigurasi xdebug.ini\"), mdx(\"ul\", {\n    parentName: \"blockquote\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_enable=1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_autostart=1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_log=/var/www/xdebug.log\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_connect_back=0\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_port=9005\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.idekey=PHPSTORM\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_host=docker.for.mac.localhost\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xdebug.remote_handler=\\\"dbgp\\\"\"))), mdx(\"p\", null, \"Mari kita coba urai satu persatu. Ada cukup banyak parameter disana. Ada 3 menurut saya yang paling penting yaitu \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"remote_enable\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"remote_port\"), \" dan \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"remote_host\"), \". \"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"remote_enable\"), \" mengaktifkan xdebug dalam mode remote. Karena kita menerapkan development berbasis docker Laradock, container service PHP menggunakan php-fpm dalam bentuk container tersendiri. Development kita berada di lokal, jadi kita butuh mengaktifkan remote ke container tersebut.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"remote_port\"), \" beberapa artikel menyarankan port berbeda dengan port yang digunakan php-fpm yaitu 9000 secara defaultnya. Anda bisa mencoba port yang lain. Untuk tutorial ini saya memakai port 9005\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"remote_host\"), \" disini sebenarnya merupakan alamat host lokal kita, untuk case macOS docker memakai nama khusus \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker.for.mac.localhost\"), \". Untuk kasus lain, penggunaan localhost ataupun 127.0.0.1 dapat digunakan.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Penggunaan parameter lainnya anda bisa ikuti yang telah saya tulis di atas. Beberapa memang mungkin tidak diperlukan untuk case tertentu.\"))), mdx(\"p\", null, \"Seperti biasa, karena kita melakukan perubahan konfigurasi. Container kita perlu dibuat ulang. Jalankan perintah \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker-compose build workspace php-fpm\"), \". Nah sekarang kita akan konfigurasi IDE-nya yaitu PHPStorm.\"), mdx(\"h2\", null, \"Konfigurasi PHPStorm\"), mdx(\"p\", null, \"Saya merupakan pengguna baru PHPStorm. Walapun saya sudah memakai salah satu produk berbasis \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.jetbrains.com\"\n  }), \"JetBrains\"), \" yaitu Android Studio. PHPStorm ini sangat cocok buat mereka yang ingin dimanjakan lewat UI yang user friendly. Hampir semua konfigurasi tersedia berbasis UI tanpa perlu membuat File konfigurasi sendiri. Untuk mengakses semua konfigurasi pilih menu preferences. Jika berbasis macOS Anda cukup menekan tombol \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"\\u2318 + ,\"), \".\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"308px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9557d20779f3659a1bc670f1ba451ac9/2ece4/phpstorm-pref.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"77%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAADWklEQVQ4y3WTS3MiZRSG2c7KKf+GVZYLhwDNpTvQXLqhSXeAEK6BhkAgIVxCQghJmKlEs/BSzsKNpTt3VrnzD7h057hwY/wT7h8PHcuqKZ3FW+/p0/W933sun6+ofsjr9YjJ8Qj9678Y/gTuj9D8AYrC0aufedkxuRnUcLMhPr8csGjb9OyYxEcsuwW6VphPZy4PZx18fVPjbtim3Wqiug+0br+ls/6OxtU3NNbfUxjeM6zlOWlXqFgJ+vUCzV2DUiZGv1HisOpIXmdwUOa0W8c31OO4cY1ELkcq7qffrbC6EMfDFuOjBvc3cy7Oz5iOTyg6O8S1CJlUAiOtEwxssa2paKqKEgp68Bn5HQLRGC9CCoYRZ3DU5tV6yeJsxIXguNdivZzxcjXn1eqcRtkhm1Kx0hr+LT/BcAR/IMjH/i2PfbbtoGpxAkqUzM4uxWqDcv2AYqXB7n4dp1yT3Oa7SWG/gV2qYjkljHwBJaoRiqiEY9terGdMcZi10OMqgXiO571f8N//Sf71I8aXj+ifPZL+4g8+WP3Os/4bnvV+5b3hG6yvHnn/5Dc+SpSJqwrqtiamVCIxFZ+eypBOxjCNBInKlGR9Tro+JSNI1caYzZnwFLU8Qd2bENsbo1eES6foKR0rE8UypAVGDEUJ4fMHQl4fNLnFkYmfn3a4u55xuxixnPYlp2JnIjhy0JHJZhNBXJlsu2ITCgaIqppA9bAVVPDtVaps6ynphRyw89SqZeqCRn3f4107h5032bGekM+ZkstLLocSjhKKql7/FGH/RtAplNASSc9l1khx1O9wfXXJTNZkuZh7uLw4o3/oYvyzLrfXV7gHDbZkquGY5mEj6DkslvefBJWwCKYZ9A9Z36yYnB5zdXkh4gtajRo5M002k+RA4odP7jh0W96a/EfQzOVR47rn0EgnmYxHnoPZZMxquaDbPsCR8jbLnJEhFKTcjryqDQdldzflviWY23H+LTlnGnRE4HR0LCV2cOVgOpkQxMVdCsvMYMqlWjRMUl5XWPq+EXpLcBOEIjJy+WllTVrNOq6IdqWkQa/L8KhHr+tSKZc80XzWYHQ8oFmv/r9De7f4VLISIZmQp9fvMZ9NOey0WZzPpZcjhoM+5VKBxLYqbnVm0zGdd/Twb+MHW9IX1b64AAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/9557d20779f3659a1bc670f1ba451ac9/2ece4/phpstorm-pref.png\",\n    \"srcSet\": [\"/static/9557d20779f3659a1bc670f1ba451ac9/7e516/phpstorm-pref.png 100w\", \"/static/9557d20779f3659a1bc670f1ba451ac9/772e8/phpstorm-pref.png 200w\", \"/static/9557d20779f3659a1bc670f1ba451ac9/2ece4/phpstorm-pref.png 308w\"],\n    \"sizes\": \"(max-width: 308px) 100vw, 308px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \" Banyak konfigurasi yang bisa Anda jelajahi. Untuk kali ini, pilih saja \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Language & Frameworka > PHP > Debug\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a462874b9b077679838888252e4e7087/0b6f4/php-debug-pref.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"74%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACSklEQVQ4y21Tx3bbMBDUN+WSyBTFAhIgQRQ2Fas8+yX5j9ziYz55sruSLRcd5gEsmJ3ZWSyi76GCgzYeuiU0Hl3n4L1HCAHWWlo95nlGXWsY06BtW9krpQjVOygslNvBjWfY4Yja77FSAcq0sD6i0C1WeYWEsC6UIM1LelciyQok6/wLFr7fI05HrJVDXkdaO+SqRjOc0PQHmLCD6U9owwTfD/LtIV1jRYT3sLB0YNw+kZqIh8zS2qOoNFw/oxv2N/Q7aLJfmIhce6zuqBOFNmxxOP8WlX44oCRiVhHHCT3B+QDjBlK6hfaEeEDlNnSYFeUfFTKh7jaYH3+RggNsfBTbSjfwcYALPerGomo6KmSptwR9fa6NEHyxvBxf0Dz9w/fhL76FFyz7P0ip+Q0lbR2lTApb51FpQ62okdG3vLyEdNdyokaE+RlNPCOtZmR6kh4qImAVDG7BulSiYLlaC5I76sRyWlgKYI9xc0JRe2SUMttsrJOVwQVMe3lv7GVlhXdTTksnYdR2Au+zyouiMEyYNjsM81YCGjdbjPMFhopxkeRK8sFyWnbo4h55FYQwJ0L+WbMiGnBGRbdDkfW64X0rB19tf7ROhEwUxiONxuY62E5S7uim8K34kaQ0yBn1UiOjMLjYpcil2Gs4b5aZZNo9i23es+I0V+hCFFJOmA85GiO2ykWya8pZyVfxpk5CyUjRuD1LMKyOrx4fYss8Nm3nRbGkTuo+DzP/y6QsgrGQkfiU2M1C/naIbTPeh8AzyolnBZGaEan/if+aIyGgnAzCwgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/a462874b9b077679838888252e4e7087/e17e5/php-debug-pref.png\",\n    \"srcSet\": [\"/static/a462874b9b077679838888252e4e7087/7e516/php-debug-pref.png 100w\", \"/static/a462874b9b077679838888252e4e7087/772e8/php-debug-pref.png 200w\", \"/static/a462874b9b077679838888252e4e7087/e17e5/php-debug-pref.png 400w\", \"/static/a462874b9b077679838888252e4e7087/0a47e/php-debug-pref.png 600w\", \"/static/a462874b9b077679838888252e4e7087/5a190/php-debug-pref.png 800w\", \"/static/a462874b9b077679838888252e4e7087/0b6f4/php-debug-pref.png 984w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Pada bagian Xdebug, silahkan sesuaikan Debug Port dengan konfigurasi awal yang kita telah tentukan. Pada screenshoot, saya isi 9005. Selanjutnya pilih bagian \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Language & Frameworka > PHP > Servers\"), \". Ini bagian yang paling penting menurut saya. Di sini, kita akan melakukan konfigurasi agar PHPStorm dapat terkoneksi ke server Xdebug. Ingat, Walapun kita install di localhost tanpa menggunakan docker, konsep client server masih berlaku. Yang akan membedakan nantinya pada path mappingnya.\"), mdx(\"p\", null, \"Ada beberap parameter yang harus kita konfigurasi. Name, Host, Port dan Path mappingnya.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0a365f18864a894afb0ed3b160ff5242/0b6f4/phpstorm-servers-pref.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"74%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACc0lEQVQ4y31Ty27UMBTND7FgU5hHEiex4zh+5DkzmU4ZlUp0gVQhFiy6QoId6pbvPVx7plGnCBZHN3Fujs+5j6jVGoWpUJYKslIopYKzBkPfoWsb1KqGcw3GcaQciaqqoJQKz0VREDg45yH694jXA0y7R93sIPWIJVNYFAZL4fBmkSPjEqKqA5KcgxUCmSjBOEV+iimdJVlB5xKR7fZohhskhQUTDUWDRZLjas1wtWLQpE5qg5ySPfwFBbmprYNrewhyFKcZYpZjTTGq3Q799oisbLBMFXLZIgkfGSUyKCpJbWpUiuyqkspSUlk4lDFE2qDSli4RgdCDCCfsj/dwpNL2h0C4Sli4bRkzZNLAbO9RNJ+Q6lsw8zFEUffQpNITnpSLgEgqh83uAON8QkeHVSDz8MRvkxLq+BP13W/k17/Ab54oPlEjD6Rcg1NtQz2proFwbb6gmh6xqB9wVT1gbT5jTdI9mUdG3auUn4ICQuQQFLmgy+KEHKRz3jOid/ob7PEHxPQd7+0jVvYrqTvV0P/AqJP9do9hM2HYThjpuRu355zsAoEwYTzY7ccdqZFguZw/evhxUFR8ZWxAbU51e84JZOcYCOPcwnQHKvIG6/w0OqcbPWEa5s7SeNimo9iFUdGuvSBcXRJq6GYiaw5xbojQzRa8ZT93LVls+xENoR1GuK7/N6EncjQu0myCupTb2cazZVlbgiaYYLdU+j+ERDLsbmG763lTXir0MzaEpuwCRmpMN2wua/hCQJQSQb/9QPs8BbKk0H81xe8xpxXzEJWP1Uwww/9DnY/YebFft/8lvNLX8OeKOu4vSzNaO9kjtnf4AzU1I1Gvv9URAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/0a365f18864a894afb0ed3b160ff5242/e17e5/phpstorm-servers-pref.png\",\n    \"srcSet\": [\"/static/0a365f18864a894afb0ed3b160ff5242/7e516/phpstorm-servers-pref.png 100w\", \"/static/0a365f18864a894afb0ed3b160ff5242/772e8/phpstorm-servers-pref.png 200w\", \"/static/0a365f18864a894afb0ed3b160ff5242/e17e5/phpstorm-servers-pref.png 400w\", \"/static/0a365f18864a894afb0ed3b160ff5242/0a47e/phpstorm-servers-pref.png 600w\", \"/static/0a365f18864a894afb0ed3b160ff5242/5a190/phpstorm-servers-pref.png 800w\", \"/static/0a365f18864a894afb0ed3b160ff5242/0b6f4/phpstorm-servers-pref.png 984w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Name untuk based Laradock development menggunakan nama \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"laradock\"), \" sesuai konfigurasi \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".env\"), \". Anda dapat menemukan konfigurasi ini pada line 62. Jika anda merubah konfigurasi ini, maka Name pada konfigurasi di atas harus diubah juga.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b04172bdd69465703758823adeb6f3ec/6af66/env-name.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"24%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsSAAALEgHS3X78AAAA2klEQVQY022Q204DMQxE01w2981tAxVsKf3/jxzs0Ici8XA0Y0eyPREjeBTnFuy7t8jbhuYsdruhEG8hrJr7w3vsG/ctKuG1XjV7dblA5DkQRkesDWVG5K7ho8KmJKFgiWjM8kZKOFIm0CDu87sjH4yG5IEHXTTXVoP23Mp6SxlnTPhIv5w54fPJpCRCiP85W8FXa7jWisfRSTMes+N+VJyj4JYzvsuOO3GNkXxZX5DoOl7E0f8M9HWHrQWuN/iRYYdDfE9UB9jDQ1FMTVE0qXxR/i+Oy2+vA38AqWZvDjaijVIAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/b04172bdd69465703758823adeb6f3ec/e17e5/env-name.png\",\n    \"srcSet\": [\"/static/b04172bdd69465703758823adeb6f3ec/7e516/env-name.png 100w\", \"/static/b04172bdd69465703758823adeb6f3ec/772e8/env-name.png 200w\", \"/static/b04172bdd69465703758823adeb6f3ec/e17e5/env-name.png 400w\", \"/static/b04172bdd69465703758823adeb6f3ec/0a47e/env-name.png 600w\", \"/static/b04172bdd69465703758823adeb6f3ec/6af66/env-name.png 640w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Untuk Host silahkan isi \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"localhost\"), \" dan port sama dengan konfigurasi awal \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"9005\"), \". Nah, karena kita menggunakan Laradock yang artinya kita meremote file PHP, kita perlu centang path mapping. Langkah ini yang menurut saya penting, karena saya waktu itu stuck di langkah ini \\uD83D\\uDE02. Path mapping ini penting, agar xdebug bisa mengidentifikasi breakpoint dari file-file PHP kita. Saya sempat dibuat pusing, karena issue ini. Semua konfigurasi sudah berjalan, namun breakpoint tidak dapat dibaca xdebug. Sesuaikan saja path local dengan path pada container php-fpm kita. Kalau tidak yakin path remotenya, kita bisa masuk ke container \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"php-fpm\"), \" dengan menjalankan perintah \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"docker-compose exec php-fpm bash\"), \". Biasanya path mapping file-file php berada pada folder \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var/www/\")), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/023809e082c420b187e89c960d22fee5/3dd3e/path-mapping.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"30%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAAA30lEQVQY02VRWbKDMAzjXl1oEgiQQLam2/0Pomcb6DB9HxrbiaORlGZwHt0w4dwqXG76H07XG/rRyY7uB5T6hKWZz/kN49g3g5vxeH8w+gWqtzB2JAxEQJXQmm4lejyhO4t0r7CTk8etNoROCHc0mkjmkDDHhCUVBMISM/wS4enccZU+Ss87ax9wVWZzRtgVsvz6esviqm4Fqzr2TJbJbiwVIRfEfJc7RaoZvKNMj4aHkKsoZCWc257HL37vjla/lk+XlvILZCNvtvPXNs+pcGZeIGcUw0R57x8m5Fvl+Q+Qk9o2Ae+nCQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/023809e082c420b187e89c960d22fee5/e17e5/path-mapping.png\",\n    \"srcSet\": [\"/static/023809e082c420b187e89c960d22fee5/7e516/path-mapping.png 100w\", \"/static/023809e082c420b187e89c960d22fee5/772e8/path-mapping.png 200w\", \"/static/023809e082c420b187e89c960d22fee5/e17e5/path-mapping.png 400w\", \"/static/023809e082c420b187e89c960d22fee5/3dd3e/path-mapping.png 595w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Konfigurasi selesai, Untuk beralih ke mode debug pada PHPStorm IDE,  Anda bisa aktifkan pada tombol icon seperti gambar di bawah. Posisinya ada di pojok kanan atas. Menagapa tidak menggunakan debug biasa? karena jika kita memakai mode debug biasa (tombol bericon kutu berwarna hijau) maka kita akan berada pada mode debug per File dan dieksekusi dengan PHP CLI. Pembahasan Debug CLI mode tidak akan dijelaskan detail di sini. Mungkin pada next artikel ya \\uD83D\\uDE01. Kita berfokus pada keseluruhan debugging Aplikasi.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"328px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9aa70aa200d7b6f12bd9d9a295be47f5/d5c60/start-listening.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"24%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsSAAALEgHS3X78AAABGElEQVQY012Q2U7DMBRE8yPQ5REhFXiBJk3i7LGzOApdBLRpkvb/f+HgBiEhHkbXdzx37tiW4wnSVLItG/T7jqbdUjUtcSYRSYxXhPhlSKBjRJCQy5zDx4EozfFEiGo0qtZUusUVEZbt+gRhRpookiwnV6Uxy7nxa89lLTbYsYuduDiOjxcLcl2wMUHenA0ijvHDyMxKYxhieUGE7flmY8pwufB5PHI8nRivV7q+pzsbdD19P3IeeobxYu47vozuPAycuo5+GNnt98iiwFo9v/C4euL1bU2tNVIpVFlSVNVUy7o2qSWZvKVXU6+bBmWGJ11ZofcN7W77Y7hYLrlhbnA3m3E/n0+YzgZ/uV/+v27xsDT/rqdnfwNHJLJUWl1+dAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/9aa70aa200d7b6f12bd9d9a295be47f5/d5c60/start-listening.png\",\n    \"srcSet\": [\"/static/9aa70aa200d7b6f12bd9d9a295be47f5/7e516/start-listening.png 100w\", \"/static/9aa70aa200d7b6f12bd9d9a295be47f5/772e8/start-listening.png 200w\", \"/static/9aa70aa200d7b6f12bd9d9a295be47f5/d5c60/start-listening.png 328w\"],\n    \"sizes\": \"(max-width: 328px) 100vw, 328px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Silahkan Anda coba membuat breakpoint pada file php Anda. Silahkan klik ke sebelah kanan line number. Akan muncul bulatan merah. Nah, itu yang dinamakan breakpoint.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/d81ad634fe1c59492c306b9a6798f87a/914c7/breakpoint.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.99999999999999%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABPElEQVQoz42R6W6CQBSFeRQ3nBWqwIAVKC64YuoW+/5vcnqZxNS4YH98ufNj7pdzZpxqf8L38YL5co2smKKYzTEtl5jMF1hVB6y2O6RfE4z/ibNYb3E4/2BT7UhWWlEtzYoZsUQ6TuFrDcEFZI1oxik3W+xOF+yPZ0pT2ZQ2UV7AhBGG3gd8KSG7bah+H7Lngnc6EN3uU5xytSHB1IryyczOqzQ2I6RRhnGQIhkESEyEKPChJQN3XbBe7wEno8X0jj9hYoW5yfFJ0qH24DFKQjJOy89wroLbZNcZkNDlHNznYJqhRQstqlzPNkmf4dwK7mcSj2BiqugpaCboDZlNIRpoFpoYoQkRhSFCb2Ar+4IT4iUvhfUvD0IDpTQ41RZSEPTbSjXSKBySUHseFIkUXbbU5wbeC6mmvBW+4RdEi2AcvrnwwAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/d81ad634fe1c59492c306b9a6798f87a/e17e5/breakpoint.png\",\n    \"srcSet\": [\"/static/d81ad634fe1c59492c306b9a6798f87a/7e516/breakpoint.png 100w\", \"/static/d81ad634fe1c59492c306b9a6798f87a/772e8/breakpoint.png 200w\", \"/static/d81ad634fe1c59492c306b9a6798f87a/e17e5/breakpoint.png 400w\", \"/static/d81ad634fe1c59492c306b9a6798f87a/0a47e/breakpoint.png 600w\", \"/static/d81ad634fe1c59492c306b9a6798f87a/5a190/breakpoint.png 800w\", \"/static/d81ad634fe1c59492c306b9a6798f87a/914c7/breakpoint.png 978w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Ketika kita mereload browser dalam contoh saya \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.php\"), \" maka browser akan terus reload. Kenapa? karena file kita berhenti dieksekusi. Eksekusi akan berhenti pada titik merah alias breakpoint.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"400px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/0ad8ac7672688940dd1f9122d1bfbab6/21b4d/breakpoint-stop.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"63%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAABpUlEQVQ4y5WT624aMRCF/ShJYK/ABli8vu39GhZo1SaKlHeoVKnvL53aDjSoLV31xyeP5fHxzHiG7I+fkRYV8qpBUTeouhHd/gghJRhn4IJ/wK9hKPIcaa4gUo5MCTRtB/Ly+oZhPKBsOiuq0gw8H7BKT3CSER47wL3Ar2yNw0a9vvvMta9oDiB1N6Dpn5CVNVRegQmJXSwQxxnWmwRryrF43MALIrj+Cm5wTfRh67MdkyAyK2BQeWlT5zKFiHUKsQRfU6wDF+H8HsHs4Z/4D3dIKAUxIoaLoFAZwlUEb+nDCX3cz+dnnNs4Du5mM2xp8nfB3WaDrRbdLiJEnoel62I1wVKL8oT9mTITClH0iEUYahbndZow8EGNoPmQX59iBFWOOOGgTCDRrbHTdkzZJJRx3T45yPjpC9phb3uwG0a03ZNuoR5V26NuG/1Qg0tZbmGyK+rWth5pv35H8/wD6vgNbX/CaRhQ94N1lFlpnf8HYlK1r5xfkueDqah+jzArK1s2cuvyVCRpcSPC0ube6nrpmumpMXt7YYJLIGZcDeYfKj3LPwEkwK9Qs8yGjAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"phpstorm-pref\",\n    \"title\": \"phpstorm-pref\",\n    \"src\": \"/static/0ad8ac7672688940dd1f9122d1bfbab6/e17e5/breakpoint-stop.png\",\n    \"srcSet\": [\"/static/0ad8ac7672688940dd1f9122d1bfbab6/7e516/breakpoint-stop.png 100w\", \"/static/0ad8ac7672688940dd1f9122d1bfbab6/772e8/breakpoint-stop.png 200w\", \"/static/0ad8ac7672688940dd1f9122d1bfbab6/e17e5/breakpoint-stop.png 400w\", \"/static/0ad8ac7672688940dd1f9122d1bfbab6/0a47e/breakpoint-stop.png 600w\", \"/static/0ad8ac7672688940dd1f9122d1bfbab6/5a190/breakpoint-stop.png 800w\", \"/static/0ad8ac7672688940dd1f9122d1bfbab6/21b4d/breakpoint-stop.png 1280w\"],\n    \"sizes\": \"(max-width: 400px) 100vw, 400px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Nah, dari situ Anda akan tau kondisi variable-variable yang ada. Jika Anda perhatikan pada panel bawah, ada beberapa informasi variable Seperti \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$_SERVER\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$_COOKIE\"), \". Dengan informasi yang cukup detail seperti ini, pengguna debug var_dump atau manual echo menurut saya sudah ter-cover di sini. Pada tingkat advanced, bahkan Anda bisa menganalisa alur eksekusi kode Framework besar macam Laravel.\"), mdx(\"h2\", null, \"Sum up!\"), mdx(\"p\", null, \"Silahkan coba Anda terapkan teknik debugging ini Mungkin di awal-awal, teknik ini terlihat menyusahkan diri sendiri atau buang-buang waktu. Percayalah Bro\\uD83D\\uDE0E, semakin komplek Aplikasi yang Anda bangun, debugging manual akan benar-benar merepotkan. Saya sudah membuktikannya in the real world case. Ya, kalau memang Anda butuh sesuatu yang simpel untuk Aplikasi simpel, teknik debugging ini mungkin saja akan menyita banyak waktu Anda. So, it's all yours.\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":6,"excerpt":"Ini merupakan tulisan pertama saya yang bersifat pembahasan teknis. Tulisan ini saya dedikasikan kepada  Kang Hendi . Beliau merupakan…","frontmatter":{"date":"July 03, 2020","path":"/blog/xdebug-docker-setting","title":"Setting Xdebug dengan Laradock Docker & PHPstorm IDE","banner":{"publicURL":"/static/banner-xdebug-16619e480d40cf7eeac4ab666c8ae2b5.png","childImageSharp":{"fluid":{"src":"/static/16619e480d40cf7eeac4ab666c8ae2b5/ee604/banner-xdebug.png","srcSet":"/static/16619e480d40cf7eeac4ab666c8ae2b5/69585/banner-xdebug.png 200w,\n/static/16619e480d40cf7eeac4ab666c8ae2b5/497c6/banner-xdebug.png 400w,\n/static/16619e480d40cf7eeac4ab666c8ae2b5/ee604/banner-xdebug.png 800w","aspectRatio":1.9047619047619047,"sizes":"(max-width: 800px) 100vw, 800px","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAU1AAAFNQFIEK9AAAADDklEQVQoz03Sy08TQRzAcf4JhN2Z3RYL8RFfiXpQY9SQNBqNRz2beEJvRj3owZMxmmgoJAaNGvFRUUFDaLdbhSK1tFRrbSmltCBIedWi1KC7OzuPdbZo4mEyt29+M79PjeD/qYvKiiYGS7o4UDTA0KQBh7MIjHxG8GPchJ/DJsz0Y5jzY1h4TaTp50SefUzl+ftMLt1mjnKbJS+3MZnfjuU2q0asBis8WNZB/5wB3n0xQCSHQCzFgx9MmIyYMB3CcCyAYb6XSFMviPT1CZXnHlDnYgdzfOOhMg/yqB2vEZSfOp9SA2pZF9/M62Jo2gDhCQNGRxGMJ0yYiJogM2jCvIqlXB+Bk91EnvFSYbGT1v64y8ByqyWXPWwt6rEnrOiSsqLXqr81GOLR8IIhRPiUw2M8mEQwNWJKkSHsCIQInOrD0nQ3EWa76O7UA+qO3GGbZzuZ83s7f7ZnbcJ65ZfW7Aubh3xhdKyrC2/qiSNZTSMYsf/xE2q49540XYox1/Uh5gioxBkK0Lr5l+TmeS97cuyidfboDeZ+9NQStVbmLLWxmlrlt7ZTyRrnvGfYyTMn2OGWC7T5dAt1DSWR3DOGG64ULNfVAmu8xs/1Alv/LELrF1+QU5eD7MCePdY250bmvvqYQaPdcpQ89h/+0g76ImiXL224fQNmY/+s4QjmDSmaM2B3Fh/qKFkH7lcs562K5fKOUin/CoPiK7JpwEvdzS3siPMc29f9nIHVVosviFX/UFBWtVpF0+rUVU18s6SLg3OGGC4Y696n0fHhUbxfzZK63igRUwEMJvyYR4mw4CVbpnrp3nSAk7H5eKrbtres2VHgX7E96oB7FN4Wdddw3tyeGSENiTTamkmYOyZieOt4GDfmVAK4R5nzAcWHtL7UQR1L/zx6+IRKRa8ef2XNo82nf16XBmdQQyxrNsZH0YZE0mxKxsymDN/2ePCvx5ecz1Mq86i8dOf/IHf4N2p7FNXvOni7wD3OVJ8tRjNIjCeQyD0KqUETjAWxNNFHpMkeInGPUrGTyot3OfD2qsM/fJNCaaZiFboAAAAASUVORK5CYII="}}}}}},"pageContext":{}}}