{"id":2036,"date":"2014-07-11T15:14:13","date_gmt":"2014-07-11T13:14:13","guid":{"rendered":"https:\/\/usersnap.com\/?p=2036"},"modified":"2025-10-01T08:17:32","modified_gmt":"2025-10-01T06:17:32","slug":"super-powers-for-web-developers","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/","title":{"rendered":"Super Powers for Web Developers"},"content":{"rendered":"\n<p>These days being a developer isn\u2019t an easy task. Among all the tasks and challenges you already have to deal with, you need to deal with bugs. And here&#8217;s the rub, most of the time bugs, specifically client-side bugs, are submitted by end-users. We see 3 key problems with this:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1:-most-users-are-not-tech-savvy\">1: Most Users Are Not Tech Savvy<\/h2>\n\n\n\n<p>It\u2019s true and whilst we not say it to them directly, we know it. The user knows something\u2019s wrong, because the website is not working for them, but they don\u2019t know why, how to fix it or how to report it.<\/p>\n\n\n\n<p>Try asking your Grandmother what JavaScript is for example. I\u2019m sure it\u2019d be a short conversation. And some users don\u2019t know what the browser is. So how can they properly describe the problem?<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2:-&quot;it-works-for-me&quot;\">2: &#8220;It Works For Me&#8221;<\/h2>\n\n\n\n<p>Thanks to different browsers, standards and developers a website that one user sees can be completely different for another user. When was the last time you made even a simple site that worked, easily, across Chrome, Firefox and IE?<\/p>\n\n\n\n<p>So you can imagine the questions a developer needs to ask the user in order to reproduce a bug:<\/p>\n\n\n\n<ul id=\"draft_check_box_list_0\" class=\"wp-block-list\">\n<li>Which page were you on?<\/li>\n\n\n\n<li>What were you doing exactly?<\/li>\n\n\n\n<li>Did you select the wrong thing?<\/li>\n\n\n\n<li>Did you add the street address as requested?<\/li>\n\n\n\n<li>Were you even logged in?<\/li>\n<\/ul>\n\n\n\n<p>I\u2019m sure you can think of others. But even if the user reported the situation correctly, how often has the developer, or a QA, responded with:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>It works on my machine<\/p>\n<\/blockquote>\n\n\n\n<p>It\u2019s said so often you can <a href=\"http:\/\/www.amazon.co.uk\/Geek-T-shirt-Thats-worked-machine\/dp\/B001W0WFZA\" target=\"_blank\" rel=\"nofollow noopener\">buy the t-shirt on Amazon<\/a>. To the end user though, what they hear is:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>You&#8217;ve done something wrong. It\u2019s not the website, <strong>it\u2019s you!<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>Let\u2019s be honest, <em>it happens<\/em>.<\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Bug Tracking<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3:-the-end-user-isn\u2019t-experienced-with-bug-trackers\">3: The End User Isn\u2019t Experienced With Bug Trackers<\/h2>\n\n\n\n<p>The majority of the people who find bugs don\u2019t know how to report them. Despite most companies and projects having copious documentation, explaining how to do so, the results are still questionable.<\/p>\n\n\n\n<p><strong>But let\u2019s say we removed the client from the equation; what <span style=\"color: #ff0000;\">super powers<\/span> would a developer need in order to get the required information to fix a bug, without asking anyone?<\/strong><\/p>\n\n\n\n<ul id=\"draft_check_box_list_2\" class=\"wp-block-list\">\n<li>How would they be able to get an overview about the client\u2019s session, including:\n<ul id=\"draft_check_box_list_1\" class=\"wp-block-list\">\n<li>The browser resolution and version<\/li>\n\n\n\n<li>The operating system and version installed<\/li>\n\n\n\n<li>The installed browser plugins<\/li>\n\n\n\n<li>The steps which actually produced the bug<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>How could they see through the user\u2019s eyes, so they can understand what\u2019s wrong and where <figure><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-in-action.png\" rel=\"lightbox\"><img decoding=\"async\" width=\"633\" height=\"424\" class=\"alignnone size-full wp-image-2054\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-in-action.png\" alt=\"usersnap console recorder in action\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-in-action.png 633w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-in-action-300x200.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-in-action-140x93.png 140w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/a><\/figure><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-can-we-do?\">What Can We Do?<\/h2>\n\n\n\n<p>Let\u2019s be honest, the worst thing about most errors users&#8217; report is that they happen on the client-side, in front-end javascript. And this is a cruel, cruel, place, far away from the developer trying to fix them.<\/p>\n\n\n\n<p>It\u2019d be awesome if, somehow, a developer could have the <span style=\"color: #ff0000;\"><strong>superpower<\/strong><\/span> to repeat them, without asking the client to do anything.<\/p>\n\n\n\n<p>Here\u2019s the solution &#8211; <strong>The Usersnap Console Recorder.<\/strong><\/p>\n\n\n\n<p>You can <strong><span style=\"color: #ff6600;\">read more<\/span><\/strong> about <a href=\"https:\/\/usersnap.com\/features\/console-recorder\" target=\"_blank\" rel=\"nofollow noopener\">the recorder\u2019s marketing jibber jabber<\/a>, but here&#8217;s a quick summary:<\/p>\n\n\n\n<ul id=\"draft_check_box_list_3\" class=\"wp-block-list\">\n<li>The Usersnap Console Recorder saves every kind of JavaScript error. You can browse the web developer console in the Usersnap dashboard as if you were using your user\u2019s browser<\/li>\n\n\n\n<li>Every error log contains an NTP synced timestamp, a full stack including JavaScript source files, line numbers and formatting like the developer console you already know &amp; love in Google Chrome and Mozilla Firefox<\/li>\n\n\n\n<li>Every debug log issued by <em>console.log<\/em>, <em>console.info<\/em>, <em>console.warn<\/em> or <em>console.error<\/em> is fully formatted, including recursive object\/array formatting and browsing<\/li>\n<\/ul>\n\n\n\n<p>You\u2019ll never see <code>[Object object]<\/code> hell during debugging!<\/p>\n\n\n\n<p>Now let&#8217;s look at some typical scenarios.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"accessing-properties-of-undefined-or-null-objects\">Accessing Properties of Undefined or Null Objects<\/h3>\n\n\n\n<p>Something which happens quite often in the wild is that a fixed element should be aligned by another element, using the \u201ctop\u201d property during scrolling.<\/p>\n\n\n\n<p>But due to a markup rework, the element #inexistent no longer exists. This leads to <code>offset()<\/code> returning null and the property <code>top<\/code> can no longer be accessed:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function clicky() { \n   console.info(\"Accessing a property of an undefined object\");\n   console.log(\"calculating scroll top %d\", $('#inexistent').offset().top); \n};\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"calling-methods-of-undefined-objects\">Calling Methods of Undefined Objects<\/h3>\n\n\n\n<p>Here&#8217;s another one; you try to call a method on an undefined object.<\/p>\n\n\n\n<div class=\"highlight\">\n<pre><span class=\"kd\">function<\/span> <span class=\"nx\">clicky2<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">info<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"Calling a method of an undefined object\"<\/span><span class=\"p\">);<\/span>\n   <span class=\"nx\">adjust<\/span><span class=\"p\">.<\/span><span class=\"nx\">ScrollBottom<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">};<\/span>\n<\/pre>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"plain-exceptions\">Plain Exceptions<\/h3>\n\n\n\n<p>Sometimes you even know during development that something can break. Wouldn\u2019t it be great to know when?<\/p>\n\n\n\n<div class=\"highlight\">\n<pre><span class=\"kd\">function<\/span> <span class=\"nx\">clicky3<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">info<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"Throwing an exception\"<\/span><span class=\"p\">);<\/span>\n   <span class=\"k\">throw<\/span> <span class=\"s2\">\"Version Mismatch!\"<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n<\/pre>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"xhr-errors\">XHR Errors<\/h3>\n\n\n\n<p>Sometimes XHRs deliver errors, such as 404 (Not Found) or 500 (Internal Server Error). Most of the time these errors lead to bugs which are very hard to reproduce.<\/p>\n\n\n\n<div class=\"highlight\">\n<pre><span class=\"kd\">function<\/span> <span class=\"nx\">clicky4<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">info<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"404 on XHR\"<\/span><span class=\"p\">);<\/span>\n   <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nx\">ajax<\/span><span class=\"p\">({<\/span>\n           <span class=\"s2\">\"url\"<\/span><span class=\"o\">:<\/span> <span class=\"s2\">\"non_existing.php\"<\/span>\n       <span class=\"p\">});<\/span>\n<span class=\"p\">};<\/span>\n<\/pre>\n<\/div>\n\n\n\n<p>Cross-Origin XHRs are also troublesome. Image someone changes the CORS header and your cross origin XHR no longer work any more.<\/p>\n\n\n\n<div class=\"highlight\">\n<pre><span class=\"kd\">function<\/span> <span class=\"nx\">clicky5<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">info<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"Cross-Origin on XHR\"<\/span><span class=\"p\">);<\/span>\n   <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nx\">ajax<\/span><span class=\"p\">({<\/span>\n           <span class=\"s2\">\"url\"<\/span><span class=\"o\">:<\/span> <span class=\"s2\">\"http:\/\/facebook.com\/cross-origin\"<\/span>\n       <span class=\"p\">});<\/span>\n<span class=\"p\">};<\/span>\n<\/pre>\n<\/div>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/javascript-xhr-errors.png\" rel=\"lightbox\"><img decoding=\"async\" width=\"691\" height=\"353\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/javascript-xhr-errors.png\" alt=\"javascript xhr errors\" class=\"wp-image-2053\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/javascript-xhr-errors.png 691w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/javascript-xhr-errors-300x153.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/javascript-xhr-errors-140x71.png 140w\" sizes=\"(max-width: 691px) 100vw, 691px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"xhr-and-time-tracking\">XHR and Time Tracking<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"recording-the-steps-during-a-checkout\">Recording the Steps During a Checkout<\/h3>\n\n\n\n<p>Conversion rates are key in most businesses. Any user obstacle can lower rates. For example, it takes too long to load a page or you have an error during checkout.<\/p>\n\n\n\n<p>This short example shows a standard click handler which calls <code>getcheckout.php<\/code> via XHR. Unfortunately, the second XHR to <code>confirm.php<\/code> fails and throws a JavaScript exception.<\/p>\n\n\n\n<p>That\u2019s nice, but: the user doesn\u2019t get any feedback; the page just stalls.<\/p>\n\n\n\n<div class=\"highlight\">\n<pre><span class=\"kd\">function<\/span> <span class=\"nx\">checkout<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"check out clicked!\"<\/span><span class=\"p\">);<\/span>\n   <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nx\">ajax<\/span><span class=\"p\">({<\/span>\n           <span class=\"nx\">url<\/span><span class=\"o\">:<\/span> <span class=\"s2\">\"getcheckout.php\"<\/span><span class=\"p\">,<\/span>\n           <span class=\"nx\">dataType<\/span><span class=\"o\">:<\/span> <span class=\"s2\">\"json\"<\/span>\n       <span class=\"p\">}).<\/span><span class=\"nx\">done<\/span><span class=\"p\">(<\/span><span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n           <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"Checked out: %o\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">data<\/span><span class=\"p\">);<\/span>\n           <span class=\"nx\">confirm<\/span><span class=\"p\">();<\/span>\n       <span class=\"p\">});<\/span>\n<span class=\"p\">};<\/span>\n<\/pre>\n<\/div>\n\n\n\n<div class=\"highlight\">\n<pre><span class=\"kd\">function<\/span> <span class=\"nx\">confirm<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"nx\">confirmService<\/span><span class=\"p\">.<\/span><span class=\"nx\">checkConfirm<\/span><span class=\"p\">();<\/span>\n   <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nx\">ajax<\/span><span class=\"p\">({<\/span>\n           <span class=\"nx\">url<\/span><span class=\"o\">:<\/span> <span class=\"s2\">\"confirm.php\"<\/span>\n       <span class=\"p\">}).<\/span><span class=\"nx\">error<\/span><span class=\"p\">(<\/span><span class=\"kd\">function<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n           <span class=\"k\">throw<\/span> <span class=\"s2\">\"internal server error on confirm!\"<\/span><span class=\"p\">;<\/span>\n       <span class=\"p\">});<\/span>\n<span class=\"p\">};<\/span>\n<\/pre>\n<\/div>\n\n\n\n<p>Additionally, you get a full synced time frame of your user\u2019s action (regardless if the time on the user\u2019s browser is correct or not!).<\/p>\n\n\n\n<p>The full formatting support for objects <code>(console.log(\u201cChecked out: %o\u201d, data);)<\/code> is super convenient for debugging.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/xhr-and-time-tracking.png\" rel=\"lightbox\"><img decoding=\"async\" width=\"598\" height=\"394\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/xhr-and-time-tracking.png\" alt=\"xhr and time tracking\" class=\"wp-image-2052\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/xhr-and-time-tracking.png 598w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/xhr-and-time-tracking-300x197.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/xhr-and-time-tracking-140x92.png 140w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/a><\/figure>\n\n\n\n<p><br><a name=\"howtostart\"><\/a><\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Bug Tracking<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-get-started?\">How To Get Started?<\/h2>\n\n\n\n<p><a href=\"http:\/\/www.usersnap.com\/signup\" target=\"_blank\" rel=\"nofollow noopener\">Sign Up for an Usersnap account<\/a>, if you haven\u2019t already. (<em>Risk-free trial included<\/em>. &nbsp;Go ahead)<\/p>\n\n\n\n<p>Then create a project, or use an existing one, and click on the <strong>gear icon<\/strong>, visible in the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-signup-step-1.png\" rel=\"lightbox\"><img decoding=\"async\" width=\"364\" height=\"313\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-signup-step-1.png\" alt=\"usersnap console recorder signup step 1\" class=\"wp-image-2051\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-signup-step-1.png 364w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-signup-step-1-300x257.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-signup-step-1-140x120.png 140w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Then click the button <strong>Change Widget Look and Feel<\/strong> on the right side of the screen, which you can see in the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-change-widget-look-and-feel.png\" rel=\"lightbox\"><img decoding=\"async\" width=\"603\" height=\"242\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-change-widget-look-and-feel.png\" alt=\"usersnap console recorder change widget look and feel\" class=\"wp-image-2050\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-change-widget-look-and-feel.png 603w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-change-widget-look-and-feel-300x120.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-change-widget-look-and-feel-140x56.png 140w\" sizes=\"(max-width: 603px) 100vw, 603px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You&#8217;ll then see a configuration screen like this one. Set <strong>Enable Console Recorder<\/strong> to <strong>ON<\/strong> and close the window. Now you can paste the widget code on any page you want.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-configuration.png\" rel=\"lightbox\"><img decoding=\"async\" width=\"634\" height=\"540\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-configuration.png\" alt=\"usersnap console recorder configuration\" class=\"wp-image-2049\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-configuration.png 634w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-configuration-300x255.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/usersnap-console-recorder-configuration-140x119.png 140w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Your clients need only press a button to show you where the error is. Usersnap does the rest. <a href=\"http:\/\/www.usersnap.com\/?gat=console#signup\" rel=\"nofollow\">Try it out today!<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">We know you&#8217;ll be impressed.<\/h3>\n\n\n\n<p><em>This article was brought to you by <a href=\"https:\/\/usersnap.com?gat=blog-post\" target=\"_blank\" rel=\"noopener\">Usersnap<\/a> &#8211; a visual bug tracking and screenshot tool for every web project.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>These days being a developer isn\u2019t an easy task. Among all the tasks and challenges you already have to deal with, you need to deal with bugs. And here&#8217;s the rub, most of the time bugs, specifically client-side bugs, are submitted by end-users. We see 3 key problems with this: 1: Most Users Are Not [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":2047,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-2036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png","author_info":{"display_name":"Bogomil Shopov","author_link":"https:\/\/usersnap.com\/blog\/author\/bogo\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Super Powers for Web Developers<\/title>\n<meta name=\"description\" content=\"Visual bug reporting for web developers with advanced client-side JavaScript error-recording and full XMLHTTPRequest logs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Super Powers for Web Developers\" \/>\n<meta property=\"og:description\" content=\"Visual bug reporting for web developers with advanced client-side JavaScript error-recording and full XMLHTTPRequest logs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-11T13:14:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T06:17:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"633\" \/>\n\t<meta property=\"og:image:height\" content=\"338\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bogomil Shopov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bogomep\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bogomil Shopov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\"},\"author\":{\"name\":\"Bogomil Shopov\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/c2615b6e2d1dac8f8a6043fbb3f9164d\"},\"headline\":\"Super Powers for Web Developers\",\"datePublished\":\"2014-07-11T13:14:13+00:00\",\"dateModified\":\"2025-10-01T06:17:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\"},\"wordCount\":1031,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\",\"url\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\",\"name\":\"Super Powers for Web Developers\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png\",\"datePublished\":\"2014-07-11T13:14:13+00:00\",\"dateModified\":\"2025-10-01T06:17:32+00:00\",\"description\":\"Visual bug reporting for web developers with advanced client-side JavaScript error-recording and full XMLHTTPRequest logs.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png\",\"width\":633,\"height\":338},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/c2615b6e2d1dac8f8a6043fbb3f9164d\",\"name\":\"Bogomil Shopov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/36c097d843d0a182d60a846cde514abf7992231b741a9c0ad4b547b6073f4169?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/36c097d843d0a182d60a846cde514abf7992231b741a9c0ad4b547b6073f4169?s=96&d=mm&r=g\",\"caption\":\"Bogomil Shopov\"},\"sameAs\":[\"https:\/\/x.com\/bogomep\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/bogo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Super Powers for Web Developers","description":"Visual bug reporting for web developers with advanced client-side JavaScript error-recording and full XMLHTTPRequest logs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/","og_locale":"en_US","og_type":"article","og_title":"Super Powers for Web Developers","og_description":"Visual bug reporting for web developers with advanced client-side JavaScript error-recording and full XMLHTTPRequest logs.","og_url":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2014-07-11T13:14:13+00:00","article_modified_time":"2025-10-01T06:17:32+00:00","og_image":[{"width":633,"height":338,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png","type":"image\/png"}],"author":"Bogomil Shopov","twitter_card":"summary_large_image","twitter_creator":"@bogomep","twitter_site":"@usersnap","twitter_misc":{"Written by":"Bogomil Shopov","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/"},"author":{"name":"Bogomil Shopov","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/c2615b6e2d1dac8f8a6043fbb3f9164d"},"headline":"Super Powers for Web Developers","datePublished":"2014-07-11T13:14:13+00:00","dateModified":"2025-10-01T06:17:32+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/"},"wordCount":1031,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/","url":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/","name":"Super Powers for Web Developers","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png","datePublished":"2014-07-11T13:14:13+00:00","dateModified":"2025-10-01T06:17:32+00:00","description":"Visual bug reporting for web developers with advanced client-side JavaScript error-recording and full XMLHTTPRequest logs.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/super-powers-for-web-developers\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2014\/07\/header-image.png","width":633,"height":338},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/c2615b6e2d1dac8f8a6043fbb3f9164d","name":"Bogomil Shopov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/36c097d843d0a182d60a846cde514abf7992231b741a9c0ad4b547b6073f4169?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/36c097d843d0a182d60a846cde514abf7992231b741a9c0ad4b547b6073f4169?s=96&d=mm&r=g","caption":"Bogomil Shopov"},"sameAs":["https:\/\/x.com\/bogomep"],"url":"https:\/\/usersnap.com\/blog\/author\/bogo\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/2036","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=2036"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/2036\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/2047"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=2036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=2036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=2036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}