If you have Developer Tools open, an extra bit of awesomeness is that you can click and hold the Refresh button to clear the cache. Be careful to remove the source override when done though. You need to have Chrome Developer Tools open for this to work (hit F12 on Windwos/Linux, don't know the key on a Mac, or just inspect an element). Then you are able to more easily locate and debug the javascript.įor bonus points look into "source overrides" where you can make temporary changes to the javascript in Chrome that remain even when you refresh the page. do stuff to the named containerĬ(.) // use the configObject. nfigure('#" + NamedContainer.Id + "', " + JSONSerializedData.JSON + ")
#Google chrome script debugger code#
So the expresstion becomes something like open Sources tab, goto webpage that you want to debug, run some code that has infinity loop, click Chrome DevTools window to get focus on it, pause script with F8, Ctrl + \ or by clicking Pause script execution button (check 3rd step on the second screenshot), hold pressed mouse button for 1-3 seconds on the button again to see more options. You may need to use jQuery's document ready. It will render nothing, but will include the javascript on the page.īe careful to consider if the script has been loaded yet in your expression. The javascript only webblock needs to be dropped on the page where it is used. Sometimes, especially when I want to use it in multiple places, I place the javascript in a separate web block's javascript section. What I normally do when the expression gets complex enough to need debugging is put most of the javascript in the module's javascript.
I usually search for a variable of function name in the script. However, CTRL+F will open a search panel. On the Elements tab, it can be difficult to locate the script though.
You have to use the "Elements" rather than the "Sources" tab. On clicking the Save button, the form will do a bit of processing, and the data will be sent off to your (imaginary) server. This form allows you to enter a first, middle, and last name.
#Google chrome script debugger how to#
For javascript for configuring something like Highcharts.Įxpression javascript appears in the page, you can still debug it. To demonstrate how to debug an application with Chrome Dev Tools, I’m going to use a simple Add Person form. In this case there is no folder structure I could follow what I'm doing currently, I was hoping for a more comfortable way. Some other options are also available to use. Thanks for your using Java Script inside of an expression (custom highchart). You can simply navigate to the DOM element, right-click on it and select Break on -> Attribute modification.
0 kommentar(er)
