Drupal Development: How to Get Started with Xdebug using PHPStorm with Docksal

안녕하세요 제 이름은 Danny Englander이고이 스크린 캐스트에서는 로컬을 사용하여 Drupal 프로젝트로 Xdebug 및 PHPStorm으로 시작 및 실행 Docksal Docksal이라는 개발 환경은 웹 개발 환경 관리는 docker 및 docker compose를 사용하여 작성합니다 mac OS에서 docker를 실행하는 프로젝트를위한 완전히 컨테이너화 된 환경 Windows는 VirtualBox와 Mac Docker 용 Docker를 지원합니다

Windows는 이제 VirtualBox와 함께 Docksal을 사용하는 것을 정말로 좋아한다는 것을 알았습니다 도커 네이티브로 시도했지만 VirtualBox와 함께 사용하는 것 같습니다 Docksal 프로젝트 스택에 사전로드되어 있습니다 작곡가 PHP 코드 스니퍼 PHP CLI 노드를 포함하는 일반적인 개발 도구 PHP Drupal 용 NPM 루비 번 들러 Python 및 WordPress 개발 WordPress CLI의 drush Drupal 콘솔은 Drush와 같은 내장 도구를 발견했습니다 작곡가는 실제로 설정할 필요가 없으므로 매우 귀중합니다 호스트 OS는 Docksal 환경에 모두 자체 포함되어있어 속도가 정말 빠릅니다

개발을 지원하므로 지원 기능도 내장되어 있습니다 서비스가 다음과 같이 컨테이너화되므로 Solr 니스 Memcache 및 기타 도구 도커와 함께 프로젝트에 필요한 다른 서비스가 있다고 언급했습니다 추가하고 다시 컨테이너에 추가 할 필요가 없습니다 과거에 호스트 OS에서 MySQL과 같은 것을 설치하려고 시도했습니다 예를 들어 OS X에서 PHP는 오래된 버전을 재정의해야합니다

Mac 포트 또는 brew를 사용하는 것이므로 실제로 잘 작동합니다 Docksal의 fin이라는 엄청나게 강력한 명령 줄 도구이므로 아마도 fin ok를 사용하여 일부 명령을 머리말로 보았을 것입니다 꽤 좋은 개요이므로 갑시다 Docksal의 Xdebug 문서 페이지에 있으며 몇 가지 좋은 점이 있습니다 PHPStorm에서 설정하는 팁 및 여기에 표시된 다른 ID 내가 최근에 설정하고 해결 한 Visual Studio 코드 Adam NetBeans이지만 오늘은 PHPStorm 그래서 Thunder를 사용하여 기본 Docksal 사이트를 운영하고 있습니다 배포 및 Docksal의 문서는 정말 훌륭하며 좋은 지원 채널을 모두 보유하고 있습니다

로컬 개발 여기로 가보도록하겠습니다 PHPStorm을 설치하고이를 실행합니다 프로젝트를 보시면 여기 Docksal이 있습니다 그 폴더의 폴더에는 PHP 디렉토리와 기타가 있습니다 PHP I에 대한 일부 값을 무시하고 이제 핵심은 Docksal 로컬 Docksal입니다

Xdebug를 활성화 할 로컬 도트 env 파일이므로 기본적으로 이 변수 Xdebug는 1이며 Xdebug를 활성화하면 일부 작업을 수행해야합니다 서버 설정을 통해이 프로젝트의 환경 설정으로 이동하면 해당 서버와 PHPStorm 환경 설정에서 여기를 참조하십시오 무언가를 입력하고 옵션을 좁히기 위해 새로운 것을 추가하겠습니다 서버 로컬 Docksal URL에서이 URL을 복사하여 넣을 것입니다 여기에서 HTTP를 제거하겠습니다

Thunder Docksal과 키가 있습니다 여기서는 경로 매핑을 사용하여 프로젝트 루트가 아닌 경로 매핑을 사용하려고합니다 doc 루트 인 사이트의 루트이지만 프로젝트의 루트는 표준 Drupal 8은 프로젝트 루트가 있고 문서가있는 곳을 설정합니다 루트는 Drupal 파일을위한 웹 설치 위치입니다 여기에 루트에 다른 지원 파일이 있으므로 루트 슬래시 var 슬래시 www를 입력 한 다음 doc root의 경우 같은 슬래시 var 슬래시 www 슬래시 doc 루트 지금 다른 것은 Etc와 Docksal 아래에 자신의 PHP 디렉토리가 있다면 내가 추가하기로 결정하지 않았을 수도 있습니다

그뿐만 아니라 슬래시 var 슬래시 dub dub 슬래시 도트 Docksal / PHP whoops 실제로 실제로 PHP를 슬래시하고 Xdebug를 언급하지 않은 경우 프로젝트를 디버깅하는 좋은 방법은 변수와 배열을 결정하고 Drupal 프로젝트에 도움이되는 모든 종류의 깔끔한 배열을 검사합니다 Drupal 8의 Drupal 7에서 Xdebug를 사용하면 특히 시간을 크게 절약 할 수 있습니다 Drupal 8 그것은 나뭇 가지로 디버깅하는 데 귀중합니다 그렇지 않으면 당신은 초기에 정말 인기있는 Kint와 같은 것을 사용하는 것에 직면했습니다 Drupal 8 일은 악명 높았으므로 Xdebug를 발견했습니다

매우 빠르며 배열을 검사하는 데는 믿을 수 없을 정도로 훌륭합니다 변수 찾기 및 변수 정의 및 모든 종류의 깔끔한 작은 찾기 깔끔한 코드는 Kint보다 훨씬 빠릅니다 twig Xdebug라는 Drupal 모듈과 그것이 할 수있는 일은 나뭇 가지 파일에서 바로 브레이크 포인트를 사용하여 좁히는 좋은 방법입니다 당신이 디버깅하려고하는 것은 우리는뿐만 아니라 그것을 살펴볼 것입니다 예를 들어 모듈이나 테마 또는 PHP에서 PHP 표준 메소드 디버깅 거기에 중단 점을 넣는 파일이 좋습니다 서버와 함께 여기에 설정된 경로는 적용을 클릭하고 확인을 클릭합니다

오케이 우리가해야 할 일은이 Docksal 로컬을 만든 후에 환경 파일 우리는 프로젝트 자체를 다시 시작해야하므로 핀을 다시 시작해야합니다 Docksal이 Xdebug가 활성화되었음을 등록 할 수 있도록 할 것입니다 이 여기 괜찮아 이제 Xdebug를 활성화해야 하므로이 중단 점이 있습니다 여기 이것은 실제로 나뭇 가지 Xdebug에서 온 것입니다 이 작업을 수행하는 일반적인 표준 방법을 보여 드리고 싶습니다

Bario 부트 스트랩을 사용하기위한 부트 스트랩 Drupal 8 구현을위한 부트 스트랩 방금 조금 사용 했으므로 내가 그것을 사용하지 않은 것이 꽤 좋다고 생각하지만 그것은 꽤 보인다 강력하고 보도록하겠습니다 여기에 약간의 변수를 넣었습니다 가짜 변수의 일종이지만 중단 점을 설정하여 이것이 표준 방법입니다 PHPStorm에서 중단 점을 설정하면 빨간색 점이 표시되고 이제는 이 작은 전화 아이콘을 활성화하여 녹색으로 변한 다음 내가 할 일은이 페이지를 새로 고침하는 것입니다 잘 그렇습니다

그래서 우리는 그렇게 많은 변수를 얻었습니다 이것은 Xdebug 설정 이며이 $ a = 1 은이 모든 것을 트리거합니다 우리는 사전 프로세스 노드에 있으므로 여기는 기사 페이지 또는 뉴스 티저 및 여기 내 템플릿을 보면 나뭇 가지가 있다고 알려줍니다 디버깅을 활성화하고 나뭇 가지 템플릿 디버깅을 수행하므로 여기에 노드가 있습니다 –article–teaser 그래서 그 파일을 열고 사전 프로세스 노드에 있습니다

여기로 가서 티저 텍스트를 볼 수있는 콘텐츠를 볼 수 있습니다 여기서 값을 볼 수 있으므로 멋진 점은 예를 들어 복사 할 수 있습니다이 경로를 복사 할 수 있으므로 예를 들어 이것과 내가 좋아하는 다른 것은 Xdebug로 이것을 강조 표시 할 수 있다는 것입니다 이 표현을 평가해서 열어 보도록하겠습니다 그것은 나에게 거기에 가치를주고 깔끔한 것은 내가 물건을 뺄 수 있다는 것입니다 배열 경로를 여기에 다시 평가하고 여기에 계층 구조가 있습니다 배열 경로를 통해 더 많은 항목을 제거 할 수 있습니다

예를 들어 이것을 에코 할 수도 있습니다 내가 할 수 있도록 페이지를 세미콜론으로하겠습니다 사실 나는 이것을 디버깅에서 막을 수 있지만 내 값은 이 페이지를 새로 고침하면 인쇄 된 것을 볼 수 있습니다 정말 시원하고 물론 당신이 정말로 원하는 것을 원한다면 사용자 정의 템플릿 및 사용자 정의 설정 및 코딩 및 HTML 및 모든 종류의 깔끔한 이런 종류의 것들이 정말 편리 할 것입니다 당신은 내가 나뭇 가지 Xdebug를 가지고 볼 수 있도록 당신은 나뭇 가지 Xdebug를 사용 작곡가로 Drupal이 필요한 것처럼 작곡가로 설치할 수 있습니다

슬래시 나뭇 가지 밑줄 Xdebug 그래서이 나뭇 가지 Xdebug를 활성화하여 실제로 표준 Xdebug에 걸기 때문에 이것을 막을 것입니다 기본적으로 이것이 가장 기본적인 설정임을 분명히하기 위해 나뭇 가지 Xdebug의 경우 방금 중단 점에 넣고 나뭇 가지 받침대는 여기에 이것을 저장하고 이것을 디버깅합니다 다시이 나뭇 가지 디버그는이 중단 점 확장 파일을 열지 않습니다 여기에 실제로 변수를 검사 할 수 있으므로 테마 파일에서 조금 전에 살펴본 것과 동일한 변수에 대해 context / elements / content로 이동하면 텍스트 0이 표시되므로 이제 당신이 알고 사용했던 때부터 이러한 배열 경로 중 일부를 인식 할 수 있습니다 Drupal 7에서 DPM을 개발하거나 Drupal 8에서 Kint를 개발하십시오 다시 여기서 알 수 있듯이 이론적으로는 이것을 복사하고 여기로 돌아 가면 여기에 나뭇 가지를 할 수 있습니다 내용 도트 필드 티저 도트 제로 컨텍스트 값이므로 주석 처리합니다 거기에 다른 제삼자가 있습니다 이러한 유형의 훨씬 쉬운 나뭇 가지 필드 값 또는 나뭇 가지 비틀기 그래서 여기에 다시로드하자 글쎄, 여기에 있던 반향을 제거 할 것입니다 우리가 어떻게했는지 보시고 새로 고침 해주세요 이 티저를 실제로 인쇄하여 더 분명하게 만들었습니다

이것이 내 티저임을 알고 우리는 다시로드 할 것입니다 그래서 여기이 텍스트를 볼 수 있습니다 당신이 볼 수 있듯이 내 맛보기입니다 정말 놀라운 시간 절약입니다 Drupal 8 또는 Drupal 7로 개발할 때 하루 종일 사용합니다 환상적인 시간 절약 기능으로 워크 플로우 속도를 높여줍니다 Drupal 8 프로젝트에서 Docksal을 사용하는 Xdebug의 기본 개요 빙산의 일각입니다

모든 일을하는 데 많은 시간을 할애 할 수 있다는 의미입니다 여기에 깔끔한 것들이 있습니다 대단히 감사합니다