{"id":18662,"date":"2020-06-29T20:31:13","date_gmt":"2020-06-30T03:31:13","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18662"},"modified":"2023-12-01T03:36:05","modified_gmt":"2023-12-01T11:36:05","slug":"javascript-console","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-console\/","title":{"rendered":"JavaScript Console: A Guide for Beginners"},"content":{"rendered":"\n<p>Writing code, while entertaining, can also become quite tedious.<br><\/p>\n\n\n\n<p>There are days when you start writing code, realize something is not running, and get very frustrated. Even more annoying is when your code runs, but you can&#8217;t figure out why it&#8217;s not working correctly; when there&#8217;s something in your code you need to fix.<br><\/p>\n\n\n\n<p>That&#8217;s where the JavaScript console can be useful. The console allows you to keep track of what is going on in your code. This makes it easy to figure out what&#8217;s wrong in your code.<br><\/p>\n\n\n\n<p>In this guide, we&#8217;re going to discuss how to use the JavaScript console. We&#8217;ll also provide an example of an application using the console so you can quickly master the JavaScript console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The JavaScript Console<\/h2>\n\n\n\n<p>Developer, meet the console. You&#8217;ll be spending a lot of time in the console during your time as a developer, so it&#8217;s something with which you&#8217;ll need to familiarize yourself.<br><\/p>\n\n\n\n<p>The console is a place where you can display messages as your application is running and where you can manipulate the contents of a web page.<br><\/p>\n\n\n\n<p>You can tell your code to log messages to the console and they will appear when you have instructed them to. You can also use the console to modify variables, values and inspect the values stored in a variable.<br><\/p>\n\n\n\n<p>To display your console, you&#8217;ve got to open up developer tools. In Chrome, you can do this using Ctrl + Shift + I on Windows or Cmd + Alt + I on Mac. In Firefox, you can open developer tools using Command + Option + K.<br><\/p>\n\n\n\n<p>When you do, a window like this will open:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/tLj9KUG2pZw3HEqt1Kd-sIV-W__S3Q7V6c_ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk\" alt=\"\"\/><\/figure>\n\n\n\n<p>Every modern browser has its own developer tools suite and there are a number of common features across all browsers. For this tutorial, we&#8217;re just going to focus on the console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started with the Console<\/h2>\n\n\n\n<p>We&#8217;re going to start by displaying a message to the console. We can do this without even having a web page open. All you have to do is open your browser console and write the JavaScript statements you want to execute.<br><\/p>\n\n\n\n<p>There are three main methods you&#8217;ll use in the console:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>console.log(): Displays a message to the console.<\/li>\n\n\n\n<li>console.warn(): Displays a warning in the console.<\/li>\n\n\n\n<li>console.error(): Displays an error in the console.<\/li>\n<\/ul>\n\n\n\n<p>Before we continue, you shouldn&#8217;t paste anything into your console without first knowing what the code does. Many modern sites will warn you against this as there are scams which use the console to access sensitive user information.<br><\/p>\n\n\n\n<p>With that said, let&#8217;s begin! To display a message to the console, we can use this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>console.log(\"Career Karma is logging stuff to the console!\");<\/pre><\/div>\n\n\n\n<p>As soon as you execute this command, the following will be returned:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/wU9SmBQtAlB-45lJgGBhClPXbB_zkNKJyE3alktVAZAUMvOo7owxVnUfNz7Xa1Ob1eNLouGROkIioaFD7HKZ9-nResVutFYHHJS1GbnXMQOwz66OPwSMKzCKjdc1uuUhlA163BrV\" alt=\"\"\/><\/figure>\n\n\n\n<p>You can also display errors and warnings to the console. The difference between errors and warnings and a traditional <code>log()<\/code> statement is that errors and warnings appear in orange and red, respectively:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>console.warn(\"Hey, something is going on!\");\nconsole.error(\"Hey, your code has stopped working!\");<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/GXz6eGAaJ96el_m5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe_pIwF4SarOiG4St-kfpQwMepeoqJTBjs0T52cxigKuo1REijuG64gSJJRuc9s5Zhn\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Using Console in an Application<\/h2>\n\n\n\n<p>We&#8217;re going to build an app modelled after cookie clicker to showcase the console object in action. This app will display a counter which shows us how many times an image of a cup of tea has been clicked. We&#8217;ll log every click to the console so we can keep track of when they occur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Developing the Front-End<\/h3>\n\n\n\n<p>Our first step is to develop the front-end of our application. Create a file called \u201cindex.html\u201d and paste in the following code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n    &lt;head&gt;\n   \t &lt;title&gt;Tea Clicker&lt;\/title&gt;\n   \t &lt;link rel=\"stylesheet\" href=\".\/styles.css\"&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n   \t &lt;div class=\"container\"&gt;\n   \t\t &lt;h2&gt;Tea Clicker&lt;\/h2&gt;\n   \t\t &lt;p&gt;Click the tea cup as many times as you can!&lt;\/p&gt;\n   \t\t &lt;img src=\"http:\/\/images.all-free-download.com\/images\/graphiclarge\/tea_cup_with_teabag_311679.jpg\" height=\"100\" width=\"100\" onclick=\"createClick()\" \/&gt;\n   \t\t &lt;p&gt;You have clicked the tea cup &lt;span&gt;0&lt;\/span&gt; times.&lt;\/p&gt;\n   \t &lt;\/div&gt;\n\t&lt;script src=\".\/scripts.js\"&gt;&lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>This code displays four items on our web page: a title, a description of the game, an image of a cup of tea and a message informing the user how many times they have clicked the cup of tea.<br><\/p>\n\n\n\n<p>Let&#8217;s also add some styles to our code to make it look attractive. Create a file called \u201cstyles.css\u201d and paste in this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>.container {\n    background-color: lightblue;\n    margin: auto;\n    width: 50%;\n    padding: 40px;\n    text-align: center;\n}\nspan {\n    color: yellow;\n}\nimg {\n    border-radius: 50px;\n}<\/pre><\/div>\n\n\n\n<p>These styles create a box for our tea clicker game, set the color of the click counter to yellow and create rounded corners for our image. Here&#8217;s what our webpage looks like now:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/T5-hj-zcpMbx8o_cMhBJCxX1CE76C2XWBL4o1_-lo0U-FaQ2ahJ-vFrLohf8UuMQdJUgMu1lg_A1njeVWMndLb88CHdD7VFZSCUNFrYnZ9d_gXD8y1XQQ6EYTBoUpqsH1Gfe3unA\" alt=\"\"\/><\/figure>\n\n\n\n<p>When you click the tea cup, nothing happens. That&#8217;s because we haven&#8217;t added our JavaScript code yet. Let&#8217;s write the JavaScript code for our application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding in Functionality Using JavaScript<\/h3>\n\n\n\n<p>When the user clicks on the cup of tea, the counter should increment by one. Before we can increment our counter, we need to select the DOM elements we&#8217;re going to be working with: the image and the counter. DOM, or Document Object Model, elements are tags on our webpage.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var clickCounter = document.querySelector(\"span\");\nvar teaCup = document.querySelector(\"img\");<\/pre><\/div>\n\n\n\n<p>We&#8217;re also going to set up a variable which tracks how many times the cup of tea has been clicked:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var clicks = 0;<\/pre><\/div>\n\n\n\n<p>Our next step is to create a function which logs when our button has been clicked and increments our counter by one. We can do this using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>function createClick() {\n    console.log(\"The button has been clicked\")\n    clicks += 1;\n    clickCounter.innerText = clicks;\n}<\/pre><\/div>\n\n\n\n<p>The first line will print the console message &#8220;The button has been clicked&#8221; to the console. Next, we add 1 to our &#8220;clicks&#8221; counter. We then change the contents of the text in our &lt;span&gt; tag to reflect the updated click count using the innerText method.<br><\/p>\n\n\n\n<p>Let&#8217;s view our web page and click on the image of the cup of tea:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/EIKDPoZ9JdR7K2z9gO1tF3EgmA_SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU_O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV-Sofm0_NnTl2mJPEDot4bvH64ElzOQm3\" alt=\"\"\/><\/figure>\n\n\n\n<p>As seen, when we click the cup of tea our counter increments by one. In addition, the message we specified in our code is printed to the console. This helps us understand when the user clicks on the cup of tea.<br><\/p>\n\n\n\n<p>While this is a very basic implementation of the <code>console.log()<\/code> statement, in a larger application you may see that logging is used widely. For the most part, logs are only kept in development versions of applications. This is because users don&#8217;t need to see what&#8217;s going on behind the scenes. With that said, logging is still an incredibly valuable tool for developers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The console is a tool you can use to learn how your code works. You can use it to display debugging messages as your code runs or to keep track of warnings and errors.<br><\/p>\n\n\n\n<p>You should only use logging statements if you are developing your application, or if you want to create custom error messages for your code you can use for debugging. You shouldn&#8217;t keep too many logs in a web application that&#8217;s available online.<\/p>\n","protected":false},"excerpt":{"rendered":"Writing code, while entertaining, can also become quite tedious. There are days when you start writing code, realize something is not running, and get very frustrated. Even more annoying is when your code runs, but you can't figure out why it's not working correctly; when there's something in your code you need to fix. That's&hellip;","protected":false},"author":240,"featured_media":18663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-18662","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Console: A Guide for Beginners | Career Karma<\/title>\n<meta name=\"description\" content=\"The JavaScript console allows you to keep track of your code and monitor warnings and errors. On Career Karma, learn how to use the JavaScript console.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-console\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Console: A Guide for Beginners\" \/>\n<meta property=\"og:description\" content=\"The JavaScript console allows you to keep track of your code and monitor warnings and errors. On Career Karma, learn how to use the JavaScript console.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-console\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T03:31:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:36:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\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:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"JavaScript Console: A Guide for Beginners\",\"datePublished\":\"2020-06-30T03:31:13+00:00\",\"dateModified\":\"2023-12-01T11:36:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/\"},\"wordCount\":1069,\"commentCount\":2,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/\",\"name\":\"JavaScript Console: A Guide for Beginners | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg\",\"datePublished\":\"2020-06-30T03:31:13+00:00\",\"dateModified\":\"2023-12-01T11:36:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The JavaScript console allows you to keep track of your code and monitor warnings and errors. On Career Karma, learn how to use the JavaScript console.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-console\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Console: A Guide for Beginners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Console: A Guide for Beginners | Career Karma","description":"The JavaScript console allows you to keep track of your code and monitor warnings and errors. On Career Karma, learn how to use the JavaScript console.","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:\/\/careerkarma.com\/blog\/javascript-console\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Console: A Guide for Beginners","og_description":"The JavaScript console allows you to keep track of your code and monitor warnings and errors. On Career Karma, learn how to use the JavaScript console.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-console\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-30T03:31:13+00:00","article_modified_time":"2023-12-01T11:36:05+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"JavaScript Console: A Guide for Beginners","datePublished":"2020-06-30T03:31:13+00:00","dateModified":"2023-12-01T11:36:05+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/"},"wordCount":1069,"commentCount":2,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-console\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/","url":"https:\/\/careerkarma.com\/blog\/javascript-console\/","name":"JavaScript Console: A Guide for Beginners | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg","datePublished":"2020-06-30T03:31:13+00:00","dateModified":"2023-12-01T11:36:05+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The JavaScript console allows you to keep track of your code and monitor warnings and errors. On Career Karma, learn how to use the JavaScript console.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-console\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/zany-jadraque-g2xKEEyd-_I-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-console\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Console: A Guide for Beginners"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18662"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18662\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18663"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}