{"id":230274,"date":"2022-12-06T16:55:00","date_gmt":"2022-12-06T13:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230274"},"modified":"2022-12-07T12:17:15","modified_gmt":"2022-12-07T09:17:15","slug":"installera-xdebug-del-2-ide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/installera-xdebug-del-2-ide\/","title":{"rendered":"Installera Xdebug, del 2: IDE"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/installera-xdebug-del-1-xdebug-modulen\/\" title=\"Nu n\u00e4r Xdebug \u00e4r installerat med din lokala installation av PHP\">Nu n\u00e4r Xdebug \u00e4r installerat med din lokala installation av PHP<\/a><\/strong> \u00e4r det dags att koppla upp det till IDE. Detta ger oss alla f\u00f6rdelar som Xdebug har att erbjuda.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" alt=\"Installera Xdebug, del 2: IDE\"><\/a><\/p>\n<p>Det vill s\u00e4ga, det till\u00e5ter oss att:<\/p>\n<ul>\n<li>st\u00e4ll in brytpunkter,<\/li>\n<li>g\u00e5 igenom v\u00e5r kod,<\/li>\n<li>och titta p\u00e5 variabler<\/li>\n<\/ul>\n<p>Hela tiden som programmet k\u00f6rs. Det betyder att medan en sida renderas kan vi st\u00e4lla in punkter i v\u00e5r kodbas d\u00e4r vi kan se vad servern g\u00f6r med v\u00e5r kod.<\/p>\n<p>S\u00e5 visst, \u00e4ven om det kallas fels\u00f6kning f\u00f6r att ta bort buggar, kan det ocks\u00e5 ge insikt om hur en WordPress-baserad applikation, tema eller plugin k\u00f6rs och kan hj\u00e4lpa oss att f\u00e5 en b\u00e4ttre f\u00f6rst\u00e5else av WordPress-k\u00e4rnan.<\/p>\n<h2>Installera Xdebug i Visual Studio Code<\/h2>\n<p>Vid det h\u00e4r laget b\u00f6r du ha f\u00f6ljande milj\u00f6 inst\u00e4lld p\u00e5 din lokala dator:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/local-development-for-the-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Betj\u00e4nad<\/a><\/strong> (som inkluderar Nginx och MySQL och <strong><a href=\"https:\/\/tommcfarlin.com\/databases-and-tools-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">relaterade verktyg<\/a><\/strong> )<\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/installera-wordpress-foer-lokal-utveckling\/\" title=\"WordPress\">WordPress<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/the-independent-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Visual Studio Code<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/installera-xdebug-del-1-xdebug-modulen\/\" title=\"Xdebug\">Xdebug<\/a><\/strong><\/li>\n<\/ul>\n<p>De \u00e5terst\u00e5ende uppgifterna f\u00f6r alla ovanst\u00e5ende involverar att knyta Xdebug till Visual Studio Code s\u00e5 att vi f\u00e5r en bokstavlig representation av hur WordPress (och d\u00e4rmed v\u00e5rt arbete) presterar, vad det g\u00f6r och s\u00e5 vidare n\u00e4r det k\u00f6rs i webbl\u00e4saren.<\/p>\n<p>Med det sagt, l\u00e5t oss b\u00f6rja.<\/p>\n<h3>1 Installera n\u00f6dv\u00e4ndiga till\u00e4gg<\/h3>\n<p>L\u00e5t oss f\u00f6rst se till att PHP Debug Extension \u00e4r installerad i Visual Studio Code. Fr\u00e5n Extensions-menyn i sidof\u00e4ltet i IDE, s\u00f6k efter PHP Debug, och du b\u00f6r se en sk\u00e4rm som f\u00f6ljande.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" alt=\"Installera Xdebug, del 2: IDE\"><\/a><\/p>\n<p>Om till\u00e4gget inte redan \u00e4r installerat, forts\u00e4tt och installera det. Du kan beh\u00f6va starta om Visual Studio Code f\u00f6r att det nya till\u00e4gget ska tr\u00e4da i kraft.<\/p>\n<p>H\u00e4rifr\u00e5n finns det n\u00e5gra ytterligare konfigurationsinst\u00e4llningar som vi m\u00e5ste verifiera innan vi f\u00f6rs\u00f6ker fels\u00f6ka n\u00e5gon kod.<\/p>\n<h3>2 Konfigurera Xdebug (\u00c4nnu mer!)<\/h3>\n<p>Minns fr\u00e5n <strong><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/installera-xdebug-del-1-xdebug-modulen\/\" title=\"f\u00f6reg\u00e5ende inl\u00e4gg\">f\u00f6reg\u00e5ende inl\u00e4gg<\/a><\/strong> att vi beh\u00f6vde inkludera Xdebug i v\u00e5r <strong>php.ini<\/strong> -fil. Specifikt var vi tvungna att l\u00e4gga <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-18-reference-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">till f\u00f6ljande kodrad<\/a><\/strong> f\u00f6r att aktivera Xdebug:<\/p>\n<pre><code>zend_extension=\"\/usr\/local\/lib\/php\/pecl\/20160303\/xdebug.so\"<\/code><\/pre>\n<p>Nu m\u00e5ste vi jobba lite mer.<\/p>\n<ol>\n<li>vi kommer att beh\u00f6va l\u00e4gga till en konfigurationsrad till <strong>php.ini<\/strong> -filen som refererades <strong><a href=\"https:\/\/wordpress.mediadoma.com\/sv\/installera-xdebug-del-1-xdebug-modulen\/\" title=\"till i det senaste inl\u00e4gget\">till i det senaste inl\u00e4gget<\/a><\/strong> ,<\/li>\n<li>vi m\u00e5ste st\u00e4lla in ett demoskript f\u00f6r att se till att det finns en korrekt Xdebug-sektion,<\/li>\n<li>vi m\u00e5ste konfigurera Visual Studio Code<\/li>\n<\/ol>\n<p>Lyckligtvis \u00e4r alla ovanst\u00e5ende relativt snabba uppgifter. F\u00f6r det f\u00f6rsta \u00e4r konfigurationsraden som du vill l\u00e4gga till i din fil <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-20-set-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">som f\u00f6ljer:<\/a><\/strong><\/p>\n<pre><code>[XDebug]\nxdebug.remote_enable = 1\nxdebug.remote_autostart = 1<\/code><\/pre>\n<p>Sedan, st\u00e4ll in ett demo-skript och koppla upp det med Betj\u00e4nad. Du kan g\u00f6ra detta enkelt genom att skapa en katalog p\u00e5 ditt skrivbord, skapa n\u00e5got som <strong>test.php<\/strong> och sedan l\u00e4gga till <strong>phpinfo();<\/strong> till filen.<\/p>\n<p>D\u00e4refter <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#the-link-command\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l\u00e4nkar du<\/a><\/strong> katalogen och <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#other-valet-commands\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">startar om<\/a><\/strong> Valet. Jag r\u00e5kade namnge mitt katalogexempel och tappade en <strong>test.php<\/strong> -fil i katalogen.<\/p>\n<p>Om du till\u00e5ter att allt \u00e4r korrekt konfigurerat b\u00f6r du kunna ladda filen i din webbl\u00e4sare och se n\u00e5got i stil med f\u00f6ljande:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" alt=\"Installera Xdebug, del 2: IDE\"><\/a><\/p>\n<p>Och nu m\u00e5ste vi konfigurera Xdebug. S\u00e5 f\u00f6rutsatt att allt ovan har g\u00e5tt bra och till\u00e4ggen \u00e4r korrekt installerade och k\u00f6rs, borde det vara enkelt att arbeta med Visual Studio Code.<\/p>\n<p>Naturligtvis beh\u00f6ver vi ett demoskript som vi kan testa, s\u00e5 <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-21-test-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jag har skrivit n\u00e5got som \u00e4r trivialt<\/a><\/strong> men som ger dig en uppfattning om vad du kan f\u00f6rv\u00e4nta dig n\u00e4r du st\u00e4ller in brytpunkter och vad som inte.<\/p>\n<pre><code>&lt;?php\n\n\/\/ First, set a sample name.\n$exampleName = 'alice';\necho $exampleName;\n\n\/\/ Next, change the name and display it.\nif ('alice' === $exampleName) {\n    $exampleName = 'bob';\n}\necho $exampleName;\n<\/code><\/pre>\n<p>L\u00e5t oss nu rikta v\u00e5r uppm\u00e4rksamhet mot IDE. I Visual Studio Code klickar du p\u00e5 <strong>fels\u00f6kningsikonen<\/strong> som \u00e4r precis ovanf\u00f6r <strong>till\u00e4ggsikonen<\/strong> och strax under <strong>ikonen f\u00f6r<\/strong> k\u00e4llkontroll.<\/p>\n<p>I sidof\u00e4ltet h\u00f6gst upp kommer du att m\u00e4rka att det finns en uppspelningsknapp. Bredvid det finns en rullgardinslista. Det kan st\u00e5 &quot;Ingen konfiguration.&quot; Om s\u00e5 \u00e4r fallet, och jag kommer att anta att det \u00e4r det, finns det n\u00e5gra mycket specifika steg du m\u00e5ste f\u00f6lja f\u00f6r att s\u00e4kerst\u00e4lla att fels\u00f6kningen fungerar korrekt.<\/p>\n<h4>1 \u00d6ppna skriptets katalog<\/h4>\n<p>Du kommer att beh\u00f6va se till att du \u00e4r i skriptets katalog i Visual Studio Code.<\/p>\n<p>Det vill s\u00e4ga, det r\u00e4cker inte att se till att du bara har en fil \u00f6ppen. Visual Studio Code beh\u00f6ver veta fr\u00e5n vilken katalog du arbetar (eftersom den skapar en dold <strong>.vscode-<\/strong> katalog i den \u00f6verordnade katalogen).<\/p>\n<h4>2 Skapa startkonfigurationen<\/h4>\n<p>Standardstartkonfigurationen b\u00f6r fungera direkt, men den \u00e4r baserad p\u00e5 f\u00f6reg\u00e5ende steg.<\/p>\n<p>N\u00e4r du har \u00f6ppnat en katalog (i mitt fall, den som inneh\u00e5ller <strong>test.php<\/strong>) i Visual Studio Code, starta kommandopaletten (du kan g\u00f6ra detta via en genv\u00e4g som varierar fr\u00e5n OS till OS eller genom att anv\u00e4nda <strong>hj\u00e4lpmenyn<\/strong> och v\u00e4lj sedan Command Pallete).<\/p>\n<p>N\u00e4r den dyker upp anger <strong>du &gt; launch.json<\/strong>, s\u00e5 f\u00e5r du m\u00f6jlighet att visa filen <strong>launch.json<\/strong>. Ur l\u00e5dan ska det <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-22-launch-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">se ut s\u00e5 h\u00e4r<\/a><\/strong> :<\/p>\n<pre><code>{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Listen for XDebug\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"port\": 9000\n        },\n        {\n            \"name\": \"Launch currently open script\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"program\": \"${file}\",\n            \"cwd\": \"${fileDirname}\",\n            \"port\": 9000\n        }\n    ]\n}<\/code><\/pre>\n<p>Vid denna tidpunkt b\u00f6r <strong>Debug-<\/strong> menyn ha n\u00e5got som Launch Currently Open Script bredvid spelikonen. Om det inte g\u00f6r det kommer det att ge dig m\u00f6jlighet att v\u00e4lja n\u00e5got som PHP (eftersom vi har till\u00e4gget installerat).<\/p>\n<p>Om s\u00e5 \u00e4r fallet, v\u00e4lj det alternativet.<\/p>\n<h3>3 St\u00e4ll in n\u00e5gra brytpunkter<\/h3>\n<p>Nu \u00e4r det dags att se fels\u00f6karen i aktion. Vid det h\u00e4r laget startar du ett webbl\u00e4sarf\u00f6nster med ditt testskript.<\/p>\n<p>Min \u00e4r enkel:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" alt=\"Installera Xdebug, del 2: IDE\"><\/a><\/p>\n<p>Efter det, hoppas \u00f6ver till din IDE och klicka sedan p\u00e5 den v\u00e4nstra rutan till v\u00e4nster om radnumret. Detta kommer att s\u00e4tta n\u00e5gra brytpunkter.<\/p>\n<p>H\u00e4r \u00e4r ett exempel:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" alt=\"Installera Xdebug, del 2: IDE\"><\/a><\/p>\n<p>Klicka nu p\u00e5 <strong>Play<\/strong> -knappen f\u00f6r fels\u00f6karen. Omedelbart b\u00f6r du m\u00e4rka att statusf\u00e4ltet blir orange och n\u00e5gra fels\u00f6kningskontroller (f\u00f6r Forts\u00e4tt, stega in, stega ut, starta om och stoppa). Vi \u00e4r inte intresserade av dessa f\u00f6r tillf\u00e4llet eftersom vi kommer att ta en djupare titt p\u00e5 dessa i n\u00e4sta inl\u00e4gg.<\/p>\n<p>Observera ocks\u00e5 att din v\u00e4nstra ruta har en del information om variabler, klockor och s\u00e5 vidare. Om du har st\u00e4llt in brytpunkter f\u00f6r dina lokala variabler, kommer du att m\u00e4rka att <strong>$exampleName<\/strong> \u00e4r markerad men troligen oinitierad.<\/p>\n<p>Klicka p\u00e5 knappen <strong>Spela<\/strong> upp i de nya kontrollerna som har dykt upp, s\u00e5 b\u00f6r den k\u00f6ras till n\u00e4sta brytpunkt.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" alt=\"Installera Xdebug, del 2: IDE\"><\/a><\/p>\n<p>Raden kommer nu att markeras och i fels\u00f6kningsrutan kommer <strong>$exampleName<\/strong> att ges ett v\u00e4rde. I mitt fall \u00e4r detta alice.<\/p>\n<p>Du kan forts\u00e4tta leka med detta s\u00e5 mycket du vill f\u00f6r att f\u00e5 en k\u00e4nsla f\u00f6r hur fels\u00f6karen fungerar.<\/p>\n<h2>N\u00e4sta g\u00e5ng, sk\u00e4rms\u00e4ndningar<\/h2>\n<p>Fels\u00f6kning \u00e4r kraftfullt, men kan vara skr\u00e4mmande p\u00e5 m\u00e5nga s\u00e4tt. Fr\u00e5n och med n\u00e4sta inl\u00e4gg kommer jag att b\u00f6rja dela n\u00e5gra screencasts som g\u00e5r igenom hur man:<\/p>\n<ul>\n<li>fels\u00f6ka funktioner och variabler,<\/li>\n<li>\u00e4ndra v\u00e4rden i farten,<\/li>\n<li>arbeta med fels\u00f6kningskonsolen,<\/li>\n<li>och mer.<\/li>\n<\/ul>\n<p>Dessa kommer att ta lite mer tid eftersom de kommer att vara videor som beskriver hur man g\u00f6r detta, men f\u00f6rdelen borde vara stor.<\/p>\n<p>Om du inte har haft en chans att komma ikapp med allt inneh\u00e5ll i den h\u00e4r serien \u00e4n, rekommenderar jag det starkt.<\/p>\n<h3>\ud83d\udce3 En anteckning f\u00f6r medlemsf\u00f6rm\u00e5ner<\/h3>\n<p>Observera dock att innan n\u00e4sta inl\u00e4gg om sk\u00e4rms\u00e4ndningar och n\u00e4sta del av den h\u00e4r serien har jag n\u00e5gra tillk\u00e4nnagivanden att g\u00f6ra specifikt f\u00f6r medlemmar p\u00e5 webbplatsen som inkluderar rabatter p\u00e5 WordPress-baserad programvara.<\/p>\n<p>Jag kommer att ber\u00e4tta mer om det n\u00e4sta vecka.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Efter att ha installerat Xdebug, s\u00e5 h\u00e4r kopplar du upp den till din IDE och f\u00e5r insikt i din kods variabler, funktioner och i vilken ordning den k\u00f6r hela programmet.<\/p>\n","protected":false},"author":1,"featured_media":236530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[724],"tags":[1173],"class_list":["post-230274","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=230274"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230274\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/236530"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=230274"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=230274"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=230274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}