{"_id":"5608e5f7a7cc2f0d00d9754a","user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","category":{"_id":"5605f309a4574a0d00811366","version":"55a6e72f8cc73e0d00096638","__v":10,"pages":["5608e5448aedf50d0004cf93","5608e54fa7b2590d0089eae5","5608e58331beb60d001b655a","5608e59ea7b2590d0089eae8","5608e5c031beb60d001b655c","5608e5d28aedf50d0004cf95","5608e5f7a7cc2f0d00d9754a","5608e61131beb60d001b655e","5608efbdc5cff70d007d00ee","5669f132c3de130d00441858"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:21:13.347Z","from_sync":false,"order":4,"slug":"development-quick-start","title":"Development Quick Start"},"__v":10,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T07:02:15.843Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:html]\n{\n  \"html\": \"The Stencil framework provides built-in debugging tools to aid in your custom front-end development.<br>\\n\\nWhen you want to see what data is available on the page you are working on, you can simply add the <span class=\\\"inline-code\\\">debug</span> query string to your store’s <span class=\\\"inline-code\\\">localhost</span> URL. Here is an example:<br><br>\\n\\n<pre>\\nhttp://localhost:3000/product/this-is-a-sample-product?debug=context</pre>\\n\\n\\nThis will return a list of all the objects available on the page, in JSON syntax.<br><br>\\n\\nIf you want to view the available JSON objects and rendered page at the same time, simply change the <span class=\\\"inline-code\\\">debug</span> value to <span class=\\\"inline-code\\\">bar</span>. Here is an example:<br><br>\\n\\n<pre>\\nhttp://localhost:3000/product/this-is-a-sample-product?debug=bar</pre>\\n\\n\\n<h3> <A NAME=\\\"Browsersync\\\"></a> Using Browsersync to Render the Store on Desktop/Tablet/Mobile for Testing</h3>\\n\\nThe Stencil framework uses <a href=\\\"http://www.browsersync.io/\\\">Browsersync</a> to help you rapidly test your storefront themes across devices of different viewports. After you launch Stencil with <span class=\\\"inline-code\\\">stencil start</span>, your console window will display several IP addresses below the BigCommerce \\\"B\\\":<br><br>\\n\\n<pre>\\n                                     `+h\\n                                   `+ddd\\n                                 .oddddd\\n                               .oddddddd\\n                             -sddddddddd\\n                          `-sddddddddddd\\n                         -shdddddddddddd\\n                         ...-:+ydddddddd\\n                    `......`   `+ddddddd\\n                    -ddddddh-    ddddddd\\n                `   .yyyyyyo.  `+ddddddd\\n              .o/    `````    :ydddddddd\\n            -ohd+   `//////:` `.sddddddd\\n          -sdddd+   -ddddddds   `hdddddd\\n        :sdddddd+   .sssssso-   `ddddddd\\n      :ydddddddd+              -yddddddd\\n    /yddddddddddy+++++++++++oshddddddddd\\n `/hdddddddddddddddddddddddddddddddddddd\\n/hdddddddddddddddddddddddddddddddddddddd\\n_________________________\\n\\nBigCommerce Stencil\\n_________________________\\n\\n[BS] Proxying: http://localhost:4001\\n[BS] Access URLs:\\n------------------------------------\\n      Local: http://localhost:4000\\n   <b>External: http://172.24.4.28:4000</b>\\n------------------------------------\\n         UI: http://localhost:3001\\nUI External: http://172.24.4.28:3001\\n------------------------------------\\n[BS] Watching files...\\n</pre>\\n<br>\\n\\nNote the <span class=\\\"inline-code\\\">External</span> IP address, highlighted above in bold. You can copy/paste this URL to access the Browsersync server from multiple devices. Then, watch as scrolling and other actions sync up across devices. <NOBR>(<b>Note:</b> Firewalls and</nobr> other security measures might interfere with this feature.)<br><br>\\n\\nTo maximize the adoption of your themes, we recommend that you use such testing to design responsive themes that display and function well across multiple viewport sizes. \"\n}\n[/block]","excerpt":"","slug":"testingdebugging-themes","type":"basic","title":"Testing/Debugging Your Theme"}

Testing/Debugging Your Theme


[block:html] { "html": "The Stencil framework provides built-in debugging tools to aid in your custom front-end development.<br>\n\nWhen you want to see what data is available on the page you are working on, you can simply add the <span class=\"inline-code\">debug</span> query string to your store’s <span class=\"inline-code\">localhost</span> URL. Here is an example:<br><br>\n\n<pre>\nhttp://localhost:3000/product/this-is-a-sample-product?debug=context</pre>\n\n\nThis will return a list of all the objects available on the page, in JSON syntax.<br><br>\n\nIf you want to view the available JSON objects and rendered page at the same time, simply change the <span class=\"inline-code\">debug</span> value to <span class=\"inline-code\">bar</span>. Here is an example:<br><br>\n\n<pre>\nhttp://localhost:3000/product/this-is-a-sample-product?debug=bar</pre>\n\n\n<h3> <A NAME=\"Browsersync\"></a> Using Browsersync to Render the Store on Desktop/Tablet/Mobile for Testing</h3>\n\nThe Stencil framework uses <a href=\"http://www.browsersync.io/\">Browsersync</a> to help you rapidly test your storefront themes across devices of different viewports. After you launch Stencil with <span class=\"inline-code\">stencil start</span>, your console window will display several IP addresses below the BigCommerce \"B\":<br><br>\n\n<pre>\n `+h\n `+ddd\n .oddddd\n .oddddddd\n -sddddddddd\n `-sddddddddddd\n -shdddddddddddd\n ...-:+ydddddddd\n `......` `+ddddddd\n -ddddddh- ddddddd\n ` .yyyyyyo. `+ddddddd\n .o/ ````` :ydddddddd\n -ohd+ `//////:` `.sddddddd\n -sdddd+ -ddddddds `hdddddd\n :sdddddd+ .sssssso- `ddddddd\n :ydddddddd+ -yddddddd\n /yddddddddddy+++++++++++oshddddddddd\n `/hdddddddddddddddddddddddddddddddddddd\n/hdddddddddddddddddddddddddddddddddddddd\n_________________________\n\nBigCommerce Stencil\n_________________________\n\n[BS] Proxying: http://localhost:4001\n[BS] Access URLs:\n------------------------------------\n Local: http://localhost:4000\n <b>External: http://172.24.4.28:4000</b>\n------------------------------------\n UI: http://localhost:3001\nUI External: http://172.24.4.28:3001\n------------------------------------\n[BS] Watching files...\n</pre>\n<br>\n\nNote the <span class=\"inline-code\">External</span> IP address, highlighted above in bold. You can copy/paste this URL to access the Browsersync server from multiple devices. Then, watch as scrolling and other actions sync up across devices. <NOBR>(<b>Note:</b> Firewalls and</nobr> other security measures might interfere with this feature.)<br><br>\n\nTo maximize the adoption of your themes, we recommend that you use such testing to design responsive themes that display and function well across multiple viewport sizes. " } [/block]