{"id":131,"date":"2023-02-14T00:00:00","date_gmt":"2023-02-13T23:00:00","guid":{"rendered":"https:\/\/helloblog.io\/hr\/bolje-debugiranje-wordpressa-s-acornom\/"},"modified":"2026-01-20T06:33:04","modified_gmt":"2026-01-20T05:33:04","slug":"bolje-debugiranje-wordpressa-s-acornom","status":"publish","type":"post","link":"https:\/\/helloblog.io\/hr\/bolje-debugiranje-wordpressa-s-acornom\/","title":{"rendered":"Bolje debugiranje WordPressa s Acornom: WP_DEBUG koji stvarno poma\u017ee"},"content":{"rendered":"\n<p>U WordPress svijetu <code>WP_DEBUG<\/code> je prva linija obrane: hvata noticee, warninge i fatale prije nego \u0161to zavr\u0161e na produkciji. Problem je \u0161to je zadani prikaz gre\u0161aka dosta sirov \u2014 poruka se jednostavno \u201ezalijepi\u201d na vrh stranice, bez konteksta, stack tracea koji se lako prati i bez alata koji olak\u0161avaju dijagnostiku.<\/p>\n\n\n\n<p>Ako koristi\u0161 Roots stack (Bedrock + Acorn), mo\u017ee\u0161 dobiti puno ugodnije debug iskustvo. Acorn, kao most izme\u0111u WordPressa i Laravel ekosustava, pobolj\u0161ava prikaz gre\u0161aka kad su <code>WP_DEBUG<\/code> i <code>WP_DEBUG_DISPLAY<\/code> uklju\u010deni, a uz Ignition dobije\u0161 error page kakav Laravel developeri ve\u0107 godinama uzimaju zdravo za gotovo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Za\u0161to je default WP_DEBUG output frustriraju\u0107i<\/h2>\n\n\n\n<p>Kad uklju\u010di\u0161 <code>WP_DEBUG<\/code>, WordPress \u0107e ti po\u010deti prikazivati gre\u0161ke i noticee direktno u HTML outputu. To jest bolje nego ni\u0161ta (i u lokalnom razvoju bi trebalo biti stalno uklju\u010deno), ali u praksi \u010desto dobije\u0161:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>poruku bez jasnog stack tracea ili s tragom koji nije posebno \u010ditljiv<\/li>\n\n\n<li>mije\u0161anje gre\u0161aka s markupom (posebno neugodno kod AJAX-a, REST endpointa ili JSON odgovora)<\/li>\n\n\n<li>te\u017ee snala\u017eenje u kompleksnijim exceptionima i \u201echainanim\u201d uzrocima<\/li>\n\n\n<li>sporije debugiranje jer mora\u0161 ru\u010dno rekonstruirati \u0161to se dogodilo i gdje.<\/li>\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"2252\" src=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-scaled.png\" alt=\"Zadani WordPress WP_DEBUG prikaz gre\u0161ke na frontendu\" class=\"wp-image-127\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-scaled.png 2560w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-300x264.png 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-1024x901.png 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-768x676.png 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-1536x1351.png 1536w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-2048x1802.png 2048w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-default-400x352.png 400w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Default WP_DEBUG obi\u010dno samo \u201eispisuje\u201d poruku gre\u0161ke u output stranice. \u2014 <em>Forr\u00e1s: Roots.io<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Bedrock kontekst: debug je ve\u0107 dio workflowa<\/h2>\n\n\n\n<p>Ako ti je projekt baziran na <a href=\"https:\/\/roots.io\/bedrock\/\">Bedrocku<\/a>, to je moderniji WordPress boilerplate koji koristi Composer za ovisnosti i jasnu konfiguraciju po okru\u017eenjima. U Bedrock development okru\u017eenju <code>WP_DEBUG<\/code> je ve\u0107 uklju\u010den po defaultu, \u0161to je dobra navika jer rano lovi probleme koje WordPress ekosustav (pluginovi\/teme) \u010desto emitira kroz noticee i warninge.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kako Acorn mijenja pri\u010du: \u010ditljiv handler za exceptione<\/h2>\n\n\n\n<p>Acorn pobolj\u0161ava <code>WP_DEBUG<\/code> output kada su <code>WP_DEBUG<\/code> i <code>WP_DEBUG_DISPLAY<\/code> aktivni. Umjesto osnovnog ispisa, Acorn po defaultu koristi Symfony exception handler, \u0161to zna\u010di da gre\u0161ke dobije\u0161 u strukturiranijem i \u010ditljivijem formatu \u2014 s jasnijim prikazom exceptiona i konteksta.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"2252\" src=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-scaled.png\" alt=\"Acorn WP_DEBUG output sa Symfony exception handlerom\" class=\"wp-image-128\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-scaled.png 2560w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-300x264.png 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-1024x901.png 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-768x676.png 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-1536x1351.png 1536w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-2048x1802.png 2048w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-symfony-400x352.png 400w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Acornov default (Symfony) handler daje pregledniji ekran gre\u0161ke od WordPressovog standarda. \u2014 <em>Forr\u00e1s: Roots.io<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Ignition na WordPressu: najbolji UX za gre\u0161ke (kad koristi\u0161 Acorn v3)<\/h2>\n\n\n\n<p>Ako dolazi\u0161 iz Laravel svijeta, vjerojatno ti je poznat Ignition \u2014 default error page u Laravelu od v9. Dobra vijest: s Acornom v3 do\u0161la je podr\u0161ka za routing u Laravel stilu, a time i podr\u0161ka za Ignition na WordPress projektima koji koriste Acorn. U praksi to zna\u010di moderniji error ekran, bolji stack trace i puno ugodnije kopanje po uzroku problema.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"2252\" src=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-scaled.png\" alt=\"Acorn WP_DEBUG output s Ignition error pageom\" class=\"wp-image-129\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-scaled.png 2560w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-300x264.png 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-1024x901.png 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-768x676.png 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-1536x1351.png 1536w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-2048x1802.png 2048w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-ignition-400x352.png 400w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Ignition donosi \u201eLaravel-like\u201d prikaz gre\u0161aka i \u010desto ubrza dijagnostiku. \u2014 <em>Forr\u00e1s: Roots.io<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Instalacija Ignitiona (dev ovisnost)<\/h3>\n\n\n\n<p>Ignition se u WordPress + Acorn setupu dodaje kao Composer dev dependency. Pokreni naredbu iz direktorija u kojem je instaliran Acorn:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>composer require spatie\/laravel-ignition --dev\n\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">composer<\/span><span style=\"color:#9ECBFF\"> require<\/span><span style=\"color:#9ECBFF\"> spatie\/laravel-ignition<\/span><span style=\"color:#79B8FF\"> --dev<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-group callout callout-info is-style-info is-layout-flow wp-block-group-is-layout-flow\" style=\"border-width:1px;border-radius:8px;padding-top:1rem;padding-right:1.5rem;padding-bottom:1rem;padding-left:1.5rem\">\n\n<h4 class=\"wp-block-heading callout-title\">Napomena o okru\u017eenjima<\/h4>\n\n\n<p>Ignition je namijenjen development okru\u017eenju. Logika je da detaljni prikaz gre\u0161aka ne \u017eeli\u0161 izlagati na produkciji, pa se instalira s <code>--dev<\/code> i koristi uz uklju\u010deni debug.<\/p>\n\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Whoops: \u201estara \u0161kola\u201d prije Acorna v3<\/h2>\n\n\n\n<p>Prije Acorna v3 \u010desto se preporu\u010divao <a href=\"https:\/\/github.com\/filp\/whoops\">whoops<\/a> kao ugodnija alternativa Symfony error pageu. Ako si jo\u0161 na Acornu v2, whoops i dalje mo\u017ee biti korak naprijed u odnosu na default prikaz. Ipak, iz perspektive odr\u017eavanja i mogu\u0107nosti, smislenije je ciljati na upgrade na Acorn v3 kada god je to izvedivo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"2252\" src=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-scaled.png\" alt=\"Acorn WP_DEBUG output s whoops handlerom\" class=\"wp-image-130\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-scaled.png 2560w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-300x264.png 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-1024x901.png 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-768x676.png 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-1536x1351.png 1536w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-2048x1802.png 2048w, https:\/\/helloblog.io\/app\/uploads\/sites\/22\/2026\/01\/wp_debug-acorn-whoops-400x352.png 400w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption class=\"wp-element-caption\">Whoops je dugo bio popularan za bolji prikaz gre\u0161aka, posebno u starijim setupima. \u2014 <em>Forr\u00e1s: Roots.io<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Ako ne koristi\u0161 Acorn: dvije provjerene alternative u plugin formi<\/h2>\n\n\n\n<p>Ne mora svaki projekt biti na Acornu, ali i dalje ima smisla pobolj\u0161ati lokalno debugiranje. Dva alata koja se u WordPress zajednici \u010desto koriste kao \u201emust-have\u201d su:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><a href=\"https:\/\/querymonitor.com\/\">Query Monitor<\/a> \u2014 posebno koristan za upite prema bazi, hookove, HTTP pozive i performanse; u praksi \u010desto postane standardni dio lokalnog okru\u017eenja.<\/li>\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/debug-bar\/\">Debug Bar<\/a> \u2014 jednostavniji, ali solidan na\u010din da dobije\u0161 dodatne debug informacije unutar admina.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prakti\u010dan workflow: \u0161to bih dr\u017eao uklju\u010denim lokalno<\/h2>\n\n\n\n<p>Za lokalni razvoj cilj je da gre\u0161ku vidi\u0161 odmah, u formatu koji mo\u017ee\u0161 brzo pratiti do uzroka. Tipi\u010dan \u201ezdravi\u201d setup izgleda ovako:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>WP_DEBUG<\/code> uklju\u010den u developmentu (idealno kroz konfiguraciju okru\u017eenja, npr. Bedrock).<\/li>\n\n\n<li><code>WP_DEBUG_DISPLAY<\/code> uklju\u010den lokalno kad ti treba vizualni error screen.<\/li>\n\n\n<li>Acorn handler (Symfony) kao baseline, a Ignition kao bolja opcija ako koristi\u0161 Acorn v3.<\/li>\n\n\n<li>Query Monitor kao pomo\u0107ni alat kad problem nije fatal error nego logika, upiti ili hookovi.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Zaklju\u010dak<\/h2>\n\n\n\n<p>WordPressov <code>WP_DEBUG<\/code> je nu\u017ean, ali njegov default prikaz gre\u0161aka rijetko je dovoljno dobar kad radi\u0161 na ozbiljnijem projektu. Acorn podi\u017ee kvalitetu debugiranja odmah (Symfony handler), a uz Ignition na Acorn v3 dobije\u0161 iskustvo vrlo blisko Laravelu \u2014 \u0161to naj\u010de\u0161\u0107e zna\u010di br\u017ee pronala\u017eenje uzroka, manje \u201escrollanja\u201d po tragovima i manje izgubljenog vremena.<\/p>\n\n\n<div class=\"references-section\">\n                <h2>Reference \/ Izvori<\/h2>\n                <ul class=\"references-list\"><li><a href=\"https:\/\/roots.io\/better-wordpress-debugging-with-acorn\/\" target=\"_blank\" rel=\"noopener noreferrer\">Better WordPress Debugging with Acorn<\/a><\/li><li><a href=\"https:\/\/roots.io\/bedrock\/\" target=\"_blank\" rel=\"noopener noreferrer\">Bedrock<\/a><\/li><li><a href=\"https:\/\/roots.io\/acorn\/docs\/error-handling\/#ignition\" target=\"_blank\" rel=\"noopener noreferrer\">Error handling &#8211; Ignition (Acorn docs)<\/a><\/li><li><a href=\"https:\/\/github.com\/filp\/whoops\" target=\"_blank\" rel=\"noopener noreferrer\">whoops<\/a><\/li><li><a href=\"https:\/\/querymonitor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Query Monitor<\/a><\/li><li><a href=\"https:\/\/wordpress.org\/plugins\/debug-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Debug Bar<\/a><\/li><\/ul>\n            <\/div>","protected":false},"excerpt":{"rendered":"<p>WP_DEBUG je koristan, ali njegov default output \u010desto usporava debugiranje. Acorn ga mo\u017ee pretvoriti u \u010ditljiv, \u201eLaravel-like\u201d error ekran uz Symfony handler ili Ignition.<\/p>\n","protected":false},"author":42,"featured_media":126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[4,66,7,73,10],"class_list":["post-131","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-ekosustav","tag-acorn","tag-bedrock","tag-composer","tag-debugging","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":145,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/posts\/131\/revisions\/145"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/media\/126"}],"wp:attachment":[{"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helloblog.io\/hr\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}