I've done a number of posts around the customisation but the hard part is that I could not debug the JavaScript in onload.js.
Then I came across JSFiddle.
This allows you to input your HTML, your css and your JavaScript and then run the script and see the result.
The screen is divided into four segments:
Top left = HTML
Bottom left = JavaScript
Top right = css
Bottom right = Result
I'm playing around with the order of the HRD IDP so this post concentrates on that functionality.
(The full post around the order is here).
In a browser, navigate to the HRD screen and then view the source.
Copy the entire:
form id="hrd" method="post" autocomplete="off" ...
section into the HTML.
Obviously, what HTML you select depends on what you are trying to achieve.
Then write your JavaScript in the JavaScript window.
Then click "Run".
The results will show in the Results section.
Perfect - so now I can play around and see the result. This is far easier than going through the whole theme / upload etc. procedure.
What would be the cherry on top is if I could step through and debug it. And like Bob the Builder - "Yes you can!".
Run JSFiddle in Chrome.
You can add:
console.log (idp.length);
commands if you want.
To hook into the debugger, add this command at the point that you want to invoke it.
debugger;
In Chrome, hit "F12" - the developer window.
Now hit "Run" in JSFiddle.
The debugger will be activated:
Now you can step through using the commands top right and view Local etc.
Any console output you are looking for is under the "Console" tab.
This is SO much easier.
Enjoy!
No comments:
Post a Comment