Chrome’s Developer Tools allow you to quickly analyze the content/resources of a webpage. This helps you check your Campaign Manager 360 tags.
Access Developer Tools
Right-click a page and select "Inspect Element". This displays the HTML code for the element you clicked.
Select View > Developer > Developer tools.
Available Tabs and their uses
One of the most useful features of the Elements tab is that it allows you to edit the code you're inspecting. If you believe you've found a line of HTML code or a CSS rule which is causing issues on the page, you are free to simply alter the code in order to test out your hypothesis. This will affect only the version of the page stored in your browser’s temporary memory. If you reload the page (or if someone else visits it), the changes you’ve made will not appear.
- Check for Tag Modifications: This tab allows you to locate Floodlight and/or placement tags that have been implemented on the page, and to identify whether or not any modifications may have been made. When locating the tag, a useful search term is "double" - since the URLs within Campaign Manager 360 placement tags include URLs which use the "doubleclick" domain. Once located, compare the implemented version of the tag against the tag as it exports directly out of the Trafficking user interface.
- Troubleshoot Issues with CSS: Within the Elements tab, the right hand side column displays the various CSS attributes which control how and where the selected HTML element is displayed.
- The "Computed Style" bar shows all of the CSS rules which are in effect for the selected element - whether they were set via explicit CSS code written by the page's website administrator or derived from the browser's default values for HTML elements of that type.
- In contrast, the "Styles" section shows only those CSS rules which were explicitly specified by the website administrator. Each subsection here represents a different location in the page's code where a relevant CSS rule (one that affects the selected HTML element) was written. If you note a rule which is causing a problem within the page, you can click the link in the top right hand corner of that subsection in order to load the line/document where the rule in question was implemented.
Finding tags which are not written to the page: While the Elements tab will allow you to view the page's rendered HTML, placement tags are not always fired by writing code to the page itself. That said, the easiest and most reliable way to locate an implemented placement tag is to use the "search" feature of the Resources tab.
Network tab: is a built in proxy-sniffer which allows you to monitor the page's HTTP traffic - both as it loads and afterwards.USE CASES
- Check whether your placement tag/Floodlight fires: A Proxy-sniffer is the most useful tool that you can use for the QA and troubleshooting processes. Fundamentally, if a tag does not fire, it cannot track or return creative content as intended. Similarly, so long as the proper call is made (with correct syntax/formatting), our servers are indifferent as to how the tag is implemented (though considerations may need to be made depending on the nature of the page). Use the Network Tab to detect whether or not a placement tag/Floodlight has fired, and if so, make sure that the syntax of the call matches the URL found within the unmodified version of the tag.
- Latency testing: In addition to whether or not a call occurs, the Network tab will also display how long it took for a given request to receive a response. This can be useful for latency testing – especially in the case of dynamic Floodlight Tags. If a Floodlight is causing excessive lag as the page loads, watching for calls made by Piggybacked pixels can often help you to identify the cause of the problem. That is, it is unlikely that the lag will be due to the Floodlight tag itself. Rather, it's more likely that one of the piggybacked pixels within the tag is introducing latency.
Timeline tab: shows HTTP traffic and memory usage over time. Much like the Network tab, this can be useful for identifying sources of latency. Otherwise, this tab is not relevant to Campaign Manager 360 related issues.
Profiles tab: is a tool which Web Developers may use to optimize CPU usage within web applications. This tab is not relevant to Campaign Manager 360 related issues.
Audits tab: can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness. This tab is not relevant to Campaign Manager 360 related issues.
Console tab: will automatically detect errors within the page's code. Once the Network tab has helped you to determine that the tag is not firing, the Console tab may shed light on why that is the case.USE CASES
Troubleshoot syntax errors: If your tag isn't firing, check the console tab to see if Chrome has detected any errors. The key errors to watch out for are:A useful feature of the Console tab is that error messages will be linked to the line and document which caused the error. This is helpful for tracing an issue back to the line of code which must be altered, however, this feature may not always be 100% reliable. While the error detection which this tab offers can be relied upon, the attribution mechanism is relatively less accurate – and may link to a line which is only in the near vicinity of the coding error.
- "NS_IMAGELIB": this error may occur when an Iframe "src" URL is implemented as an image. This mix up will prevent the placement tag or Floodlight from firing properly, although, in the case of Floodlight tags, a conversion may be attributed despite the error. That said, if this mistake has been made for a Floodlight, none of the third party pixels which have been implemented within that Floodlight can be fired.
- "Resource interpreted as '_blank_' but transferred with MIME type " .": This indicates that there is a file format issue. MIME is an identifier for file formats on the internet. This error can occur when a resource is loaded with the wrong file extension (e.x., gif. vs .jpeg).
- "Uncaught SyntaxError": this indicates that there was a syntax error with an element on the page. Typically this means that there is an extra character (<"/-*^#) has been used inappropriately.