Debuger & Dev Tools

Links: Link-1

List of Console commands:

  • console.log(myVar, “String”);
  • console.info(myVar, “String”);
  • console.warn(myVar, “String”);
  • console.debug(myVar, “String”);
  • console.error(myVar, “String”);
  • console.log(‘%c I see smurfs!’, ‘color: green; font-weight: bold;’);
  • console.log(‘%c I see the sky!’, ‘background: blue; font-weight: bold;’);

Node Inspect –> debuging

This test will be executed running the Node.js environment, and first you need some code example:

Now in the terminal type the following commands.

Here you will get something like:

Here the code stops at the very beginning, and if you want to check any variables, you will get errors you need to CONTINUE to the 1st debugger statement. by entering: ” c ”

Before you start testing the variables you need to enter in REPL mode, by entering: ” repl ”

Now you can type any variable to see what is the value at this specific moment.

To move to the next DEBUGGER point you need to exit the REPL mode (  [Ctrl] + c  ) and then CONTINUE ( ” c ” ), then enter to REPL ( “repl” ) mode again

 

 

Applications (Resources) Panel:

  • local storage
  • Cookies
  • IndexDB
  • Session Storage
  • Cache
  • etc…

Udemy Lecture-6  3:55 min.

Test for Mobile Development (Elements):

In the top left corner there click the Icon that looks like a Phone in front of a Tablet “Toggle Device Toolbar” this should change the page view to a “Mobile Device”.

There you can choose what devise: Ipad, Iphone, Galaxy, etc…..   and you can also “Rotate” the view. to see how the site would be display when the user flips the phone.

 

Network Panel:

(dont forget to Disable Cache) Udemy Lecture-8  13:55 min.  Here you can

  • Record
  • Take Pictures.
  • See individual Files: Type, Size, Time to load.
  • Filter result by file type

Audits Panel

Makes an Audit of the Loading of the page, provide color Feed-Back and suggestions.

Go to the Audit Tabs. and select both Audits: “Network Utilization” and “Web Page Performance” then select: “Reload Page and Audit on Load” and click RUN and wait. Note: Make sure you dont have any Break-Points or those will stop the load and you will not be able to get your report.

You will get a Report with colors: Green, Yellow, Red and you know what each color mean.

  • When you see many files of the same type: “.css” “.js” etc.. you can combine some of those files to make the page rank better and faster.
  • You can also enable Compression (Uglify them) in some files to make them load faster.
  • Also you can Turn-On Browser Catching.
  • Check Un-Use CSS Rules and delete them

 

Google PageSpeed Insights

This might not be on the browser but definitely is a Developer Tool created by Google.

Go to this Link and paste the URL of the website that you want to analyze, this will add another way to Audit the page and find the recommendations provide by Google.

 


Notes in how to debug JavaScript Code

JSHint  /  JSLint  (“use strict”)

BREAK-POINTS:

  1. Standard Break Points.
  2. Conditional Break Points.

Open Dev-Tools / Sources

The standard Br-P’s: can be created and then play to review Variables at different times in the Code-Execution.

The Conditional Br-P’s: Create a regular Br-p. then Right-Click / Edit Break-Point.   then type your condition for this BR to be executed Example (  myNumber === 181 ) and “Enter”, it will look Yellow, this means is a “Conditional-BR”. Now Restart the Page: If the variable “myNumber” is not equal to “181” at the time of execution, the BR. will be skip.

—  —  —  —  —  —  —  —  —    Br-P Commands    —  —  —  —  —  —  —  —  —

Step Over: Create a Br-P. from were you want to go Line by Line. refresh and then press “Step Over” Note: (this will go line by line but will skip “FUNCTIONS“)

Step Into: Create a Br-P. from were you want to go Line by Line, refresh. You will notice that this goes Line by Line but: This will go Line by Line including “FUNCTIONS

Step Out: Same instructions  of “Step Into” but when you are done reviewing the FUNCTIONS click “Step Out” and it will go to the “Conventional Lines of Code

WATCHES:

   In the Right-Panel of the sources Tab.  is a “Watch Box” option. Go to the Center-Panel with the “file.js” and select the variable that you want to Watch, “Right-Click / Add Selected Tex to Watches“, also create a Br-P. and refresh the page, you also should create another Br-P, in the line of code that you would like to start reviewing the variable, and then use “Step Over” or “Step Into” to go line by line, but each time you can see the “Watch Box” the values of the the selected “Variable” at each specific line of code.

   Note:  You can “Add-Watch-Expressions” like: ” myArray” , ” myArray.length ” , “myArray[myArray.length-1]” ,  Etc….

SCOPE:

   Here you can find the values of many variables of that specific scope at that specific Br-P.

The CONSOLE:

You can use this commands in the Console and in your Code.js file

console.log(); Prinst to the Console

console.clear(); Clears the Console.

console.assert( expressions, “-m”); Custom-Made Errors:  Example: console.assert( arr.length >= 5, “Array length is: ” + arr.length);

console.table(var, [arr]); to see just specific items of a big “file.json” providing a array of Keys, and will print a “Table” Example:  Console.table(data, [“name”, “gender”, “email”]); x In the console you can see a very beautiful and sortable table. with the Colums: “Index”  –  “name”  –  “gender”  –  “email”.

Multi-Line Commands: We know that we can run JavaScript in the console, but evertytime you hit “Enter” it runs the code, so this keeps you coding one line at the time, if you want to type Two or more lines of code on the console before you execute them. To go to the following line without executing:  “Shift” + “Enter

 

Snippets:

Go to the Sources-Tab / Snippets-SubTab   (Video 42.08 mts)

You can write your own snippets to help you to run commands that help you.  Like STYLING an error in the console. Example: console.log(“%c Error”, “color: white; background red;”); or get the JQuery version.

 

Live Editing “file.js” :

Go to: Sources Tab / Sources SubTab: Select the “file.js” to Edit.  In the center pannel you will be able to edit the “file.js” you will see an Asterisk in the Name SubTab:  ” file.js* ” the asterisk meas it been changed, you can save that file by: Right-Click on the file “Save As…” give it a name, or you can Overwrite the current file by Clicking “Save” chose the location of your current file and click “Replace”

 

Call Stack:

Bottoms Up, something to be executed firs will be on the bottom of the stack.

This will not show all the variables like scope does, this will only show what functions have been call,

 

 

 

 


x 26.39



Copyright 2017. All rights reserved.

Posted February 14, 2017 by Edmundo in category "JS