Reports from our 2015 Meetings
Reports from our 2015 Meetings
This month we had a good look at the F12 Developer tools available in all modern browsers. You can find the tools by hovering on an elelment, right clicking the mouse and selecting "inspect element" or by pressing F12. The main purpose of the tools is to analyse and debug code so your pages work correctly in the browser. We had a look at a video from a course I did on the basics of how the tools work.
After the video we opened up our own site in each browser and examined the approached each browser took to using the tools.
We quickly noted some idiosyncrasies, such as the roll over effect. When you roll over a tag in the tools, the browser highlighted it on the page. All browsers, once you open the tools displayed this roll over effect by default, all except Edge and IE11. In Edge and IE it had to be turned on by clicking an icon on the DOM element window.
Most of the browsers docked the tools. Edge opens them in a separate window. The Chrome tools appeared to be the most extensive. In addition to the normal tools they also had a viewport on the top of the page which allowed you to see how the site would look in various formats such as iPhone 5 or laptop. This feature was on by default and after much searching we discovered the small phone icon on top right of the tools allowed you to turn it off.
The main purpose of these tools is to allow you to troubleshoot a page. You can change the HTML or the CSS code and see how changes affect the display of the page.
Here we changed "What we did" to "we did something"
Here we changed "What we did" to "we did something" The tools can also be used to find and fix problems related to how the browser shows the page.
Any changes can be saved and used to amend your own code.
The HTML code can be saved by right click on html and selecting copy. It can then be pasted into a file such as notepad.
The CSS can be saved by going to source using right click as save as.
You can also highlight the amended text and copy it.
One of the features of the tools was a graphic showing dimensions of the page as displayed. It showed the various dimensions in in pixels even though the code was written in percentages. It was god demonstration of the dynamic way a page is displayed on screen.
Here are a few links to some detailed information of using the tools.
Introduction to Chrome Development tools. and Chrome Devtools Overview
Microsoft Edge Development tools
Secrets of the Developments tools
After the break we had a look at WebpageX5 by Incomedia. It was a free distribution on one of the PC magazine CDs around September last year. One of the members was offered a discounted copy and wondered how good it was. Website X5 builds sites graphically. The program starts with an setting page asking for information about the site being created with questions like the site name and URL. You then go on to select a template or build your own. The next page generates a site map with the pages you nominate or the template generates. Then we go on to create the page content graphically. There is a page for advanced settings and one to save and export the page.
Once we created a base site and saved it, we opened it up in a web editor and found that all the code was accessible however any changes where not reflected in WebsiteX5 once we reopened the program.
Here is a link the video we looked at describing the main features.
Steve South
Sig Leader