JavaScript Debugging Reference | Web | Google Developers Discover new debugging workflows with this comprehensive reference of Chrome DevTools debugging features. See Get Started With Debugging JavaScript In Chrome DevTools to learn the basics of debugging. Pause code with breakpoints Set a breakpoint so that you can pause your code in the middle of its execution. See Pause Your Code With Breakpoints to learn how to set breakpoints. Step through code Once your code is paused, step through it, one line at a time, investigating control flow and property values along the way. Step over line of code When paused on a line of code containing a function that's not relevant to the problem you're debugging, click Step over to execute the function without stepping into it. For example, suppose you're debugging the following code: function updateHeader() { var day = new Date().getDay(); var name = getName(); // A updateName(name); // D } function getName() { var name = app.first + ' ' + app.last; // B return name; // C } You're paused on A. Step into line of code
Front-End Documentation, Style Guides and the Rise of MDX Learn Development at Frontend Masters You can have the best open source project in the world but, if it doesn’t have good documentation, chances are it’ll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures that people can figure out how things work if key employees decide to leave the company or change roles. Well documented coding guidelines help bring consistency to a codebase. If you’re writing long-form text, Markdown is clearly a great alternative to authoring HTML. This article is a broad overview of the tools available for writing documentation and for building style guides. #What is MDX? A .mdx file has exactly the same syntax as a regular Markdown file, but lets you import interactive JSX components and embed them within your content. #Writing documentation with Docusaurus Docusaurus is made by Facebook and used by every Facebook open source project, apart from React. Docz Styleguidist Storybook
Improve Your Debugging Skills with Chrome DevTools In this post we cover best practices and tips for using Chrome Dev Tools, which will help you solve your web application development struggles more easily. Have you ever had trouble with incorrectly executed JavaScript? Have you ever struggled with fine-tuning the CSS of the elements on your web page? Are you annoyed every time you test your web page on multiple different mobile devices? If the answer to at least one of the questions is "yes," then this blog post is meant for you. Check out our best practices and tips which will help you to deal with these struggles and boost your performance. Using the Chrome Developer Tools (DevTools for short), you can easily modify the appearance and functionality of the Telerik UI for ASP.NET AJAX components, or other UI framework components like Kendo UI widgets, on the fly. On This Page Inspect the Generated HTML of a Control There are a few possible approaches to check the rendering of a control: Figure 1. Pro Tips See the Applied Styles Figure 2. .
Learn How To Debug JavaScript with Chrome DevTools – codeburst That’s the basic idea of stepping through code. If you look at the code in get-started.js, you can see that the bug is probably somewhere in the updateLabel() function. Rather than stepping through every line of code, you can use another type of breakpoint to pause the code closer to the location of the bug. Line-of-code breakpoints are the most common type of breakpoint. When you’ve got a specific line of code that you want to pause on, use a line-of-code breakpoint. Look at the last line of code in updateLabel(), which looks like this: label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; To the left of this code, you can see the line number of this particular line of code: 32. Click the Resume script execution button: The script continues executing until it reaches the line of code you placed the breakpoint on. Look at the lines of code in updateLabel() that have already executed. The value of sum looks suspicious. One DevTools alternative to console.log() is Watch Expressions.
Chrome DevTools | Tools for Web Developers | Google Developers Chrome DevTools is a set of authoring, debugging, and profiling tools built into Google Chrome. Open DevTools Select More Tools > Developer Tools from Chrome's Main Menu.Right-click a page element and select Inspect.Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). Discover DevTools Device Mode Build fully responsive, mobile-first web experiences. Elements panel Iterate on the layout and design of your site by freely manipulating the DOM and CSS. Console panel Log diagnostic information during development or interact with the JavaScript on the page. Sources panel Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor. Network panel Optimize page load performance and debug request issues. Performance panel (previously Timeline panel) Improve the runtime performance of your page by recording and exploring the various events that happen during the lifecycle of a site. Memory panel (previously Profiles panel) Application panel
JavaScript Glossary Accessing array elements You can get elements out of arrays if you know their index. Array elements' indexes start at 0 and increment by 1, so the first element's index is 0, the second element's index is 1, the third element's is 2, etc. Syntax array[index] Example var primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37]; primes[0]; primes[3]; primes[150]; Array literals You can create arrays in two different ways. var arrayName = [element0, element1, ..., elementN] var primes = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37]; Read more Multi-dimensional Arrays A two-dimensional array is an array within an array. var multidimensionalArray = [[1,2,3],[4,5,6],[7,8,9]] Array constructor You can also create an array using the Array constructor. var stuff = new Array(); stuff[0] = 34; stuff[4] = 20; stuff var myArray = new Array(45 , "Hello World!" Accessing nested array elements truefalse if(!
How to remember what you learn “I don’t remember a damn thing.” The book I held in my hands was full of highlights. It seemed like I’ve got all colors of the rainbow on a page. Terrified, I started questioning how much I really know. I quickly did the math. In the past six months, I’ve devoured dozens of books, research papers, and studies on how people learn. In this work, I outline my workflow so that you can try it out. Make it time-based, take regular breaks, and learn what you’re curious about. The most important thing is that my learning is time-based, not goal-based. It’s also important to not overload yourself and take breaks. As for material, I learn what I’m interested in. For example, if you’re learning JavaScript and you’re curious about it, you’ll go and figure out how JS runtime environment works in Chrome even though the tutorial doesn’t cover it. How my learning session works Clean up working memory, apply metacognition, and "siege" the thing with questions to improve understanding. Talking to friends
Navigation sécurisée – Transparence des informations – Google Notre équipe chargée de la sécurité a conçu la fonction Navigation sécurisée pour identifier les sites Web suspects et en informer les utilisateurs et les webmasters afin qu'ils puissent se prémunir contre les attaques malveillantes. En apportant des informations détaillées sur les menaces que nous détectons et en affichant des avertissements, nous espérons éclairer les utilisateurs sur les dangers potentiels du Web et les encourager à faire preuve de plus de prudence. Environ un milliard de personnes utilisent la fonction Navigation sécurisée de Google. Nombre d'utilisateurs par semaine recevant des avertissements Des avertissements s'affichent lorsqu'un utilisateur accède à un site que nous avons identifié comme suspect ou lorsqu'il télécharge un programme malveillant. Plus d'informations Nous affichons des avertissements dans les résultats de recherche Google si l'un des sites Web répertoriés est susceptible d'endommager l'ordinateur d'un utilisateur. Plus d'informations Sites compromis
Learning Chrome Web Developer Tools Released All major browsers include developer tools, which enable developers to examine the code of a webpage or app, as well as run tests and evaluate metrics related to that code. Chrome Developer Tools (DevTools for short) is the industry standard. Explore how the tools work in actual testing and debugging scenarios and get an expanded toolbox for your day-to-day work. This course teaches the most widely used parts of DevTools, using sample files to walk through identifying issues and bugs, fixing them, and then verifying that they've been fixed. Each chapter digs into a different tool, including the Console, Elements panel, and Network panel, exploring how it's useful and when to use it. Topics include: Setting up your testing and debugging environment Customize the display of Chrome Developer Tools Inspecting elements and styles Using the Console Opening source files in the Sources panel Identifying code that slows page loading Emulating mobile connections Skill Level Intermediate
This in JavaScript | Zell Liew 21st Jun 2017 Are you confused by the this keyword in JavaScript? It confuses everyone in the beginning, so don’t worry about it. You’re not alone. But that doesn’t mean you can go on without understanding this forever. By the end of this article, you would have demystified this for yourself. So, what is this? this is a keyword whose value changes depending on how a function gets called. this in global contextthis in object constructionthis in an object methodthis in a simple functionthis in an arrow functionthis in an event listener You may wonder what this is in each context and why there’s a need to change this in the first place. This in a global context When this is called outside of any function, in a global context, this defaults to the Window object in the browser. Usually, you wouldn’t use this in a global context anyway, so the value of this here doesn’t really matter. This in object construction You can see that greg is an instance of Human in the code above. Let’s wrap up.
Keep a Changelog What is a changelog? A changelog is a file which contains a curated, chronologically ordered list of notable changes for each version of a project. Why keep a changelog? To make it easier for users and contributors to see precisely what notable changes have been made between each release (or version) of the project. Who needs a changelog? People do. How do I make a good changelog? Guiding Principles Changelogs are for humans, not machines. Types of changes Added for new features. How can I reduce the effort required to maintain a changelog? Keep an Unreleased section at the top to track upcoming changes. This serves two purposes: People can see what changes they might expect in upcoming releases At release time, you can move the Unreleased section changes into a new release version section. Can changelogs be bad? Yes. Commit log diffs Using commit log diffs as changelogs is a bad idea: they're full of noise. The purpose of a commit is to document a step in the evolution of the source code.