.png?width=1200&name=ava_Ensighten_FB_02%20(1).png "ava_Ensighten_FB_02 (1)")
Browser Tools
Ensighten Developer Tools
Cost: Free
Description: A browser extension that allows you to inject, rewrite or block Ensighten’s Bootstrap.js file
Where To Obtain: Chrome Version | Firefox Version
Notes: Note that Charles can easily do everything the Ensighten Developer Tools can (so there’s no need to have both if you’d like to simplify)
Chrome Developer Tools
Cost: Free
Description: A suite of tools essential for client-side inspecting and debugging
Where To Obtain: Included with Chrome
Notes: While Chrome is recommended over all other browsers – those using Firefox can leverage Firebug
Tutorial Links: Code School (excellent course sponsored by Google – free but registration is required – all sections are great but sections 1.1 – 5.1 are most applicable)
Ghostery
Cost: Free
Description: A browser extension that allows you to quickly see a list of all the marketing technologies installed on a given webpage
Where To Obtain: https://www.ghostery.com/try-us/download-browser-extension/
Notes: To disable the overlay shown on each pageload (so you only see the deployed tags when you click the Ghostery button) – go to Options > Advanced > Display Options and uncheck the ‘Show alert bubble’ option
Bookmarklet Tools
Ensighten Visual Tagger
Cost: Free
Description: Bookmarklet tool that allows you to visually inspect and create new elements related to your Ensighten implementation
Where To Obtain: Drag the ‘Visual Tagger’ link on the right to your bookmark bar: Visual Tagger
Alert EDL Values
Cost: Free
Description: Bookmarklet tool that outputs the newer Ensighten Data Layer’s values within the browser console
Where To Obtain: Drag the ‘NEW EDL’ link on the right to your bookmark bar: NEW EDL
Visual Event
Cost: Free
Description: Bookmarklet tool that provides debugging information visually about events that have been attached within a webpage
Where To Obtain: http://www.sprymedia.co.uk/article/Visual+Event+2
Locally Installed Software
Charles
Cost: Free to try – purchasing is highly recommended though
Description: Proxy tool that allows you to observe and modify web traffic in real time
Where To Obtain: https://www.charlesproxy.com/
Notes: All users should configure Charles to sniff SSL traffic – instructions here and here
Firefox users should install the Firefox Add-On
Tutorial Links: Ensighten Videos
Advanced Text Editor
Cost: Free to try
Description: Text editor that provides syntax highlighting, code file comparison and the ability to “see” invisible characters
Where To Obtain: Cross-Platform Recommendation: Sublime
Other Options for Mac: TextWrangler
Other Options for Windows: NotePad++
Tutorial Links: TutsPlus
Web-Based Tools
JS Beautifier
Cost: Free
Description: Online tool that quickly decompresses minified JavaScript code to make it easier to read and edit
Where To Obtain: http://jsbeautifier.org/
Notes: Sublime also has a wickedly helpful free extension called JSFormat that can beautify JavaScript files with a quick shortcut – install via Sublime’s package control
Diffchecker
Cost: Free
Description: Online tool that compares two text files and visually highlights any differences between them
Where To Obtain: https://www.diffchecker.com/
Text Encoder/Decoder
Cost: Free
Description: Text values that are a part of a URL must be encoded to ensure they don’t become malformed or break the URL – this online tool can quickly encode or decode such text values as needed (very useful when working with data values within the query string of a web beacon)
Where To Obtain: http://meyerweb.com/eric/tools/dencoder/
Notes: Of course for encoding/decoding values within a JavaScript function we’d use encodeURIComponent() or decodeURIComponent() respectively – this tool should instead just be used for ad hoc inspection or debugging of values stored in cookies or sent in the query string of an image request
Regular Expression Tester
Cost: Free
Description: Online tool that is great for testing REGEX logic
Where To Obtain: http://regexr.com/