CIW Exam Guide - Lesson 3: Functions, Methods and Events in JavaScript & Lesson 4: Debugging and Troubleshooting JavaScript

Process of Debugging

1. Identify ErrorIdentifying errors at an early stage can save a lot of time. If we make a mistake in identifying an error, it leads to a lot of time wastage. Error or bugs occur at a customer site is hard to find. Identifying the right error is import to save time and avoid errors at the user site.2. Identify the Error LocationAfter identifying an error, we need to identify the exact location in the code where an error occurs. Identifying an exact location that leads error can help to fix the problem faster.3. Analyze ErrorIn this stage, you have to use an appropriate approach to analyze the error. This will help you to understand the problem. This stage is very critical as solving one error may lead to another error.4. Prove the AnalysisOnce the identified error has been analyzed, you have to focus on other errors of the software. This process involves test automation where you need to write the test cases through the test framework.5. Cover Lateral DamageIn this stage, you have to do unit testing of all the code where you make the changes. If all test cases pass the test, then you can move to the next stage or else you have to resolve the test case that doesn't pass the test. Fix and validate: this is the final stage of the debugging process, where you need to fix all the bugs and test all test script.

Calling statement

A bit of code which serves as a reference to code stored elsewhere in the program, which is invoked when the references is stated.

call()

A built-in Method which passes a specific piece of data into a function (before other arguments) as the "this" keyword

IIFE

A function in JS that runs as soon as it's defined

Closure functions

A function with access to the parent scope, even after the parent function has been closed.

Anonymous functions

A function without a name

How do you determine the error type.

A good way is to open the Console and Go to the screen where you are experiencing the error.

Function

A named block of code that can be called when needed; can optionally return a value

Prototypes

All properties and methods in JS inherit these

What is the relationship of new mobile devices and JavaScript

Almost all new mobile devices offer online access and handle JavaScript

Argument

The actual values passed to a function's parameters

Good coding practice

Avoiding confusing syntax and naming conventions

How can event.stopPropagation() interfere with analytical systems?

Click events that trigger an analytical system must be applied to each element instead of a common parent element since any elements nested within the common parent but outside of the element that runs stopPropagation() will not trigger the analytical counter.

Maintenance debugging

Code repairs performed after a site has been launched into production

bind()

Creates a new function from the one it's attached too with the same parameters as the first function, but with a given value of "this" passed into the function.

User considerations

Debugging is considerate to the user or whoever is using the site it makes it so it is easy to comprehend and navigate the website

Event Bubbling

Events that can be triggered by elements nested within them

Debugging

Finding and fixing problems in your algorithm or program.

{capture: true}

The property needed to enable recording during the event capturing phase

The "this" keyword

In JS, it's a reference to the object that it belongs to (i.e. the global scope is used within a function)

Debugging in Microsoft Edge

Install a supported version of Windows.Install the latest version of Visual Studio. Debugging Microsoft Edge (EdgeHTML) is supported for VS versions >= 15.7. Debugging Microsoft Edge (Chromium) is supported for VS versions >= 15.9.19.Create an ASP.Net/ASP.Net Core Web Application.Set a breakpoint in your JavaScript/TypeScript file.Select 'Microsoft Edge' from the 'Web Browser' submenu in the debug target dropdown, and then press F5.

why is Maintenance debugging used

It is important to check the code to update it and make sure everything is still running properly

How can JavaScript fix the issues that mobile devices are faced with

JavaScript can change the layout to accommodate to smaller screen sizes to fix the problems you would normally have when faced.

Browsers can appear to behave differently for the following several reasons:

Monitor resolution Video card quality and settings Browser version Script interpretation The end user's CPU speed and RAM Mobile devices

Are older mobile devices and JavaScript compatible

Most past-version mobile devices are Web-enabled and many are JavaScript-compatible

What mobile devices can use JavaScript

PDAs, smartphones, iPhones, Blackberries, etc.

event.stopPropagation()

Prevents an event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event, past the point where it is called.

Debugging in Apple Safari

Safari Remote Debugging on iOS devicesSimilar to the first scenario, once the user is signed in, the Live dashboard will be displayed.Select the iOS platform and choose the desired iPhone or iPad.Hover over the desired iPhone or iPad. Choose from two browsers - Safari and Chrome. Select Safari.

Prototype modification

Should only be user created ones

apply()

Similar to call(), but arguments are passed in as array elements

Mobile devices face the following main issues:

Small and limited display Different methods of user interaction (finger touches and swipes, stylus clicks) Various screen resolutions Various operating systems

When should event capturing be used instead of bubbling?

Some events like "focus" are not compatible with bubbling.

Debugging for Mobile Devices

Step 1: Discover your Android device. Troubleshooting: DevTools is not detecting the Android device. Step 2: Debug content on your Android device from your development machine. More actions: pause, focus, reload, or close a tab.

What do debuggers do

System call ptrace lets processes control other processes. Binaries in ELF format include a lot of useful information. Calls to library functions get resolved only when the program runs. ... Compilers emit a lot of useful debugging information in DWARF format./proc/ contains a lot of information about running programs.

What are the step for debugging JavaScript code

Test the code.Identify the problem.Locate the error.Review the code.Determine the error type.Determine how to fix the problem.Correct the code.Review the code again.Test your code again, and again.Repeat as needed.

event.target

The DOM element that initiated the event.

Declaration

The bit of code that sets the values to a callable piece of representative data which may be called at a later point.

Inserting functions into X/HTML pages

The onClick event can be used for...

Operator precedence

The order of operations of coding

Event Capturing

The phase of an event trigger where each element outside of the target is collected (from outwards going in). Typically invisible unless enabled.

Parameter

The place where data that the user passes to a function is defined.

Run-time errors are

The runtime errors are the errors that occur during the execution and after compilation. An example of runtime errors are division by zero.

Passing arguments to functions

This is done when the function is called

Debugging in Google Chrome

Using the sources panel there are three parts:The File Navigator pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.The Code Editor pane shows the source code.The JavaScript Debugging pane is for debugging

Global variables

Variables declared in the main body of the program and so can be accessed anywhere in the code

Local variables

Variables declared within a function or other nested section and can only be accessed only by the code within that function or section

Why should you debug code

When you normally run an app, you see errors and incorrect results only after the code has run. A program might also terminate unexpectedly without telling you why. Running an app within a debugger, also called debugging mode, means that the debugger actively monitors everything that's happening as the program runs

Casting variables

all the data types that variables may have

Is knowing how to debug important

it's very important to understand the bug itself and the conditions under which the bug is created.

How are watchpoints implemented

Depending on your system, watchpoints may be implemented in software or hardware. GDB does software watch pointing by single-stepping your program and testing the variable's value each time, which is hundreds of times slower than normal execution.

Relationship between JavaScript and Browsers

JavaScript is one of the simplest programming languages designed for the internet. You can find it on webpages and popular browsers like Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari.

Is JavaScript good on mobile browsers

JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5 (CSS3+JavaScript+HTML) features.

Advantages of Debugging

Saves Time: Performing debugging at the initial stage saves the time of software developers as they can avoid the use of complex codes in software development. It not only saves the time of software developers but also saves their energy.Reports Errors: It gives error report immediately as soon as they occur. This allows the detection of error at an early stage and makes the software development process a stress free.Easy Interpretations: It provides easy interpretations by providing more information about data structures Release bug-free software: By finding errors in software, it allows developers to fix them before releasing them and provides bug-free software to the customers.

how do you open the debugger in Mozilla Firefox

Select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)Press Ctrl + Shift + Z on Windows and Linux, or Cmd + Opt + Z on macOS (starting in Firefox 71; prior to Firefox 66, the letter in this shortcut was S).Press the menu button (), select "Developer", then "Debugger".

Breakpoints

A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution.When the code is paused, you can examine current variables, execute commands in the console etc.

Watchpoints

An alert, placed in JavaScript code to check on the program at certain points, and to ensure the actual output matches the expected output. Watchpoints also let you pause code, but their job is to pause when a variable is changed anywhere else in your code

Built-in-functions

An inherent part of the JS language, methods

Arrow functions

an ES6 syntax for creating functions expressions with () => {} rather than function() {}

Does JavaScript work on mobile phones

older cellphone models may not support JavaScript, but, if you use unobtrusive JavaScript and graceful degradation, then it won't really matter, as your page will function in some known way on any device, as long as it is formatting itself properly.

Refactoring

revising, reorganizing, and rebuilding part of a program so it is of higher quality, without changing the outcome of the program

How to detect mobile devices in JavaScript

the easiest way to detect mobile devices in Javascript is to check if the word "mobile" exists in the HTTP user agent

Logic errors are caught by___

the programmer executing program and evaluating the output

Returning values from functions

This is optionally done after a function has finished it's tasks

Event Target Phase

This step is included in both capturing and bubbling

Custom functions

a function which is defined by the user in a specific program.