Automatically detect broken anchor tags on websites that a user visit

Automatically detect broken anchor tags
Automatically detect broken anchor tags

Purpose of broken anchor tag detection tool

This tool can automatically detect broken anchor tags on websites that a user visits.

Requirements to use this tool

To use this tool, a user should have "Toolkit For Web Developer" chrome extension installed on their web browser.

To download and install "Toolkit For Web Developer", please visit our download page: Download Toolkit For Web Developer

Supported document types

Document type Supported
main document yes
iframe elements yes
shadow dom yes

Nested shadow elements and nested iframe elements are not fully supported by this tool.

This tool also does not support shadow root opened with the closed mode.

Checking broken tags inside iframe elements is supported but rule of parent document is applied while checking errors to child frame instead of applying rule for the hostname of the child frame.

Features of this tool

  • Allows a user to specific a custom hostname.
  • Allows a user to whitelist specific URL schemes from getting checked to avoid false positives.
  • Exclude specific URLs from getting checked.
  • Provides rate limiting options to avoid sending too many requests at a time.
  • Allows a user to skip external URLs from getting checked.

Limitations of this tool

  • Sending too many get requests for validating linked resource can get a user's IP address blacklisted or rate limited by server.
  • Most external URLs can't be verified to be correct or not because some servers are configured to disallow cross origin requests.

Information about "hostname"

A hostname is the name or address of the webserver to be accessed. Hostname is not case-sensitive (e.g., www.example.com and WWW.ExampLE.com are equivalent).

Examples of URLs and their hostnames

Hostnames are composed of a series of labels concatenated with dots. For example, "en.wikipedia.org" is a hostname. Each label must be from 1 to 63 characters long, and the entire hostname (including the delimiting dots but not a trailing dot) has a maximum of 253 ASCII characters.

Tables given below shows some examples of URLs and their hostname.

URL 1 http://www.example.com/
scheme http
hostname www.example.com
port 80
origin http://www.example.com:80
path /
query
fragment
URL 2 http://search.example.com:8080/history#?modern
scheme http
hostname search.example.com
port 8080
origin http://search.example.com:8080
path /history
query
fragment #?modern

Input parameters

  • Hostname: This input parameter is used for identifying the hostname for which a rule will be applied.

  • Whitelisted schemes: This input parameter allows a user to select schemes that must be whitelisted. Whitelisted schemes will not result in an error while checking for broken tags.

  • Excluded URLs: This input parameter allows a user to specify what URLs must be excluded from getting checked. Excluded URLs will be skipped from getting checked by the tool regardless of whether they are valid or not.

  • Highlight Options: Allows a user to specify whether valid links should be highlighted or not. If box is unchecked then valid links won't be highlighted.

  • Rate limiting: This option allows a user to specify a time interval between two consecutive HTTP requests while an element is checked. Using this option a user can control the number of HTTP requests sent per minute.

  • Skip external URLs: This option allows a user to specify whether external URLs should be skipped or not. If this option is checked then all external URLs will be skipped from getting checked.

How to add a new detection rule

  • Click on "Toolkit For Web Developer" extension icon, after that a popup page will be opened.
  • Click on "Open background tools" button, this will open background tools in a new tab page.
  • Select "Auto detect broken anchor tags" from left drawer menu.
  • After that, "Auto detect broken anchor tags" tool will be shown on right side of the window.
  • Click on "Add a new detection rule" button.
  • This will open a new dialog box.
  • Enter a custom hostname.
  • Select a custom schemes to be white-listed.
  • Enter URLs to be excluded from getting checked.
  • Select highlighting options.
  • Select rate limiting options to avoid sending too many requests at a time.
  • After required settings are selected, click on "Add" button.
  • Click on "Apply changes and reload" button to apply changes.

How to edit an existing detection rule

  • Click on "Toolkit For Web Developer" extension icon, after that a popup page will be opened.
  • Click on "Open background tools" button, this will open background tools in a new tab page.
  • Select "Auto detect broken anchor tags" from left drawer menu.
  • After that, "Auto detect broken anchor tags" tool will be shown on right side of the window.
  • This will open a new dialog box.
  • User will see a saved detection rule.
  • Click on "Edit" button of detection rule.
  • Enter a new hostname.
  • Select new custom schemes that a user want to white list.
  • Enter new URLs to be exclude.
  • Select highlighting options.
  • Select rate limiting options to avoid sending too many requests at a time.
  • Click on "Update" button.
  • Click on "Apply changes and reload" button to apply changes.

How to enable or disable an existing detection rule

  • Click on "Toolkit For Web Developer" extension icon, after that a popup page will be opened.
  • Click on "Open background tools" button, this will open background tools in a new tab page.
  • Select "Auto detect broken anchor tags" from left drawer menu.
  • After that, "Auto detect broken anchor tags" tool will be shown on right side of the window.
  • This will open a new dialog box.
  • User will see a saved detection rule.
  • Click on "Enabled / Disabled" button of detection rule.
  • Click on "Apply changes and reload" button to apply changes.

How to delete an existing detection rule

  • Click on "Toolkit For Web Developer" extension icon, after that a popup page will be opened.
  • Click on "Open background tools" button, this will open background tools in a new tab page.
  • Select "Auto detect broken anchor tags" from left drawer menu.
  • After that, "Auto detect broken anchor tags" tool will be shown on right side of the window.
  • This will open a new dialog box.
  • User will see a saved detection rule.
  • Click on "Delete" button of detection rule.
  • Click on "Apply changes and reload" button to apply changes.

Detecting broken tags

After a user has provided required input parameters click on "Start Detecting" button to start detecting broken tags.

Depending on whether a tag is valid or not it will be highlighted with appropriate color.

Other Posts