How to debug inline javascript?
So, quick question: how do we debug inline Javascript code, included in the main page instead of an external script file?
The solution is quite easy; all you need to do is to add the following in the section you wish to debug:
<section class="video-overlay"> <div class="video-wrapper"> <a href="#" class="close"></a> </div> </section> <script> //# sourceURL=homescript.js var ctaSectionMobileDOM = $("#cta-section-mobile"); var mobilePaymentOverlayDOM = $("#mobile-payment-overlay"); var bxSliderInit = {}; var bxSliderDesktopInit; $(document).ready(function(){ $('#top-sports-slider').bxSlider({ infiniteLoop: false , speed: 250 , oneToOneTouch: false
All the magic is on the //# sourceURL=homescript.js part. This will create a file instance in the sources, which you can handle as any other source files:
Enjoy your debugging!