Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Debugging JavaScript Errors with a Modern Browser and F12 (200)

And the devil spoke: "Let there be errors". And God Spoke: "Let there be a debugger". This is a short tutorial to get you started in cornering JavaScript errors. I'll briefly cover

  1. The magical tool built into every modern browser called the developer tools containing debugger and the console
  2. How to open this tool
  3. The very basics
  4. A special tip when debugging 2sxc stuff

It's targeted at web designers with little experience in JS debugging. 

Every Modern Browser has Built-In Developer Tools

This is what they look like

Accessing these Developer Tools

To open these, all you have to do is press F12. It's the same shortcut for Chrome, IE, Firefox, Edge.

What's in this tool?

JavaScript Stuff

  1. Source code view of all the scripts / html parts used in the current page
  2. A console, which is very, very important...
    1. Most scripts will output additional information in the console
    2. You can do things like type in javascript to find out things - like when you type in "window" and hit enter, you'll usually get the window-object to immediatly look inside it
    3. You can also use it to experiment with single lines of code which you're just working on, like getting regular expressions right
  3. Watchers and call stacks

HTML and CSS Stuff

  1. DOM browsers
  2. CSS helpers to figure out why something has is exactly where it is and why it looks like that
  3. You can also change the dom, the styles, disable/enable and way more

Power-Tip when Debugging 2sxc Code and Dialogs

2sxc uses a highly optimized JavaScript which is compressed (also called uglified). This can make it harder to debug, so we included a debug-mode to use uncompressed Javascript. Here's how to activate it:

  1. on a normal DNN page containing 2sxc code, just add a server-parameter debug=true. Usually it will be something like
  2. to debug a 2sxc dialog you should usually open it in a new window (shift + click on the button in the in-page toolbar), then add "&debug=true" to the very long url, and refresh the page

You can read more about debugging 2sxc in the blog posts about debugging.

So give it a try, you'll be amazed.

Love from Switzerland, 

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?