The Best Browser-Based Developer Tools For Moodle, According To MoodleBites

0
1344

New Zealand Moodle Partner HRDNZ is sharing another sample of one of their popular “MoodleBites” courses. This time, the course covers the tools available for designers and developers (and teachers, too) that enable them to test and create Moodle functionality. The video focuses on the tools available on browser-based tools.

The most popular modern browsers today (Mozilla Firefox, Chrome, Safari, and Opera) all offer similar functionality to test websites. One of the most popular is the “agent switcher,” which enables users to check how the page would look on different devices.

On the MoodleBites video, based in Firefox, the instructor showcases the Inspector, which links the visual elements on a website with the corresponding HTML code for the layout and the CSS file for styling details. On CSS properties, a “Computed” tab shows the “box model,” which is the basis for understanding most elements, content, and frontiers.

Another important browser tool is the Console. While the Inspector gives you a snapshot of the website, the Console shows all activity and lets you interact with the elements. Click on a link on the page and you will see the code for the requests the page is making to the server. Or you can write commands using the page’s elements, according to the Document Object Model (DOM), which lists item such as headings, paragraphs, or divisions.

Follow the video to see how a developer would take advantage of your regular browser to develop and fix issues on the Moodle site.


eThink LogoThis Moodle Practice related post is made possible byeThink Education, a Certified Moodle Partner that provides a fully-managed Moodle experience including implementation, integration, cloud-hosting, and management services. To learn more about eThink, click here.