Comodo IceDragon

• Comodo IceDragon - Introduction
• System Requirements
• Download And Install Comodo IceDragon
• The Basics
  • Start Comodo IceDragon
  • Set IceDragon As Your Default Browser
  • Set Your Homepage
  • Search The Internet
  • Change Search Options
  • Customize The Toolbar And The Menu
  • Open Recently And Most Visited Websites
  • View Browsing History
  • Set Fonts, Languages And Encoding
  • Configure IceDragon Updates
  • Page Action Menu
  • Portable Version
  • Uninstall IceDragon
• Tabbed Browsing
  • Use Tabs
  • Customize Your New Tab Page
  • Tab Settings
• Bookmarks
  • Create Bookmarks
  • Find And Edit Bookmarks
  • Manage Bookmarks
  • Bookmarks - Import, Export And Back Up
• Privacy And Security
  • Private Browsing
  • Delete Browsing History And Configure History Settings
  • Allow/Block Pop-up Windows
  • Manage Cookies And Site Data
  • Block Websites From Tracking Your Browsing Activities
  • View And Manage Permission Settings
  • Configure Suggestions When Entering A Website Address
  • Manage Cache
  • Manage Add-on Permissions
  • Manage Passwords
  • TLS/SSL Certificates And Secure Connections
  • Manage SSL Certificates And HTTPS Security
    • View And Manage Certificates
      • Your Certificates
      • People
      • Server Certificates
      • Authorities
    • Configure Security Modules That Store Certificates And Passwords
  • Force Secure Connections
  • Website Security Indicators
  • Disable Accessibility Indicator
  • Configure IceDragon Performance And Browsing Settings
  • Network Proxy Settings
• Downloads
  • Download A File
  • Change Download Location
  • View Download History
  • Clear Download History
• Introduction To Add-ons
  • Download, Install And Configure Add-ons
    • Install Add-ons From Local Storage
    • Configure Updates To Add-ons
  • Manage Extensions
  • Customize The Appearance Of IceDragon
  • Manage Plugins
• Tools And Other Features
  • Customize Applications For Opening Different File Types
  • Search Within Page Content
  • Form Autofill
  • Keyboard And Mouse Shortcuts For Comodo IceDragon
    • Mouse Shortcuts
    • Keyboard Shortcuts
  • Manage IceDragon In Safe Mode
  • Set Up Comodo IceDragon Sync Information
  • View Digital Rights Management
  • Improve IceDragon Performance Settings
  • Comodo Online Security Extension
  • View Task Manager
• Web Developer Tools
  • Open The Tools Console
  • Inspect Page Elements
  • Use The Web Console
  • Remove Inconsistencies With HTML, CSS And Javascript
  • View And Run Style Sheets On A Web-page
  • Improve Web Page/Web Application Performance
  • Memory Tool
  • Network Monitoring
  • Storage
  • Accessibility
  • Use The Developer Toolbar
  • Use The WebIDE
  • Browser Toolbox And Browser Content Toolbox
  • Browser Console
  • Responsive Design Mode
  • Eyedropper
  • Run Experimental Java Scripts On Page
  • View Page Source
  • Service Workers
  • Connect Remote Device
  • Add More Web Development Tools
  • Work Offline
• Troubleshooting
  • Error Your Connection Is Not Secure
• Report A Bug

Inspect Page Elements

The 'Inspector' tool lets web developers analyze the layout and structure of a web page.

Inspect a page

• Open the web-page you want to access

• Click the hamburger button at top-right

• Select 'Web Developer' > 'Inspector'

OR

• Right-click on the page and select 'Inspect Element' from the context sensitive menu. You can right-click on specific items on the page to open the inspector at the relevant place.

• Move your mouse cursor over page content to view information about it in the inspector.

• Click on a page element if you want to work on it.

The 'Inspector' consists of two parts: HTML pane and CSS pane.

All parent elements are on the the left and child elements on the right.

• The left side pane is HTML pane - The top-level element in the hierarchy of all nested elements, is at the left of the toolbar.

• Allows you to view the HTML code of the selected element.

• Use the arrow keys in the left and right to navigate to the elements in the tool bar.

• The right side pane is for CSS and divided into 5 elements:

• Rules - Show all the rules that apply to the selected elements. The most recently applied styles are listed first. Styles are grouped by source. The 'inline' group lists styles applied using the HTML style attribute.

• Layout - Apply a grid overlay while inspecting the element.

• Flex Container - You can analyze the CSS Flexbox layout using IceDragon developer tools, find Flexbox containers on a page and modify them if required.

• Use the switch to toggle the overlay between on and off.

• Click the word 'flex' in the HTML pane to view the overlay when the mouse is away from the container

• 'CSS pane' > 'Rules' - A small Flexbox icon next to the word 'flex' is available in any instance of 'display:flex'. Details of flexbox's child elements are shown when you click the icon.

• Grid - Shows the number of columns into which the page is divided.

• Box Model - Shows the total space taken by the element on the page. It provides information about the layout of the currently selected element. The outside numbers show the amount padding on each side of the element.

• Computed - CSS for the specific element.

• Animations - Animations to specific element.

• Fonts - Displays all the fonts in use by the selected element.