Categories
Online Marketing

Debugging JavaScript – Chrome DevTools 101

Debugging than you need to this tutorial shows you how to make the most of chrome dev tools so that you can debug your JavaScript as quickly as possible. I’r going to use this buggy demo here to demonstrate all of the debugging tools and dip tools. I recommend that you open up this demo yourself and follow along with each step.

The link is in the description. Whatever issue you’re debugging, you always want to start by reproducing the issue. You want to find a series of actions that consistently reproduces the book in this demo. When I add five and one the result down here at the bottom is 51. Obviously that should be 6. This is the bug that I need to check down at this point. You might be tempted to use console.Log to infer where the code is going wrong.

Sure it may get the job done, but it’s rather inefficient. First, you have to find the relevant code which could take a while on a big code base. Then you have to sprinkle constant log statements throughout the code. Then you got to reload the page and look at the logs, but maybe the logs didn’t give you all the information you need, so you got to go back and add more logs and so on with dev tools.

You can pause the code in the middle of its execution, inspect the variables that are in scope at that moment in time and walk through your code, one line at a time open, dev tools by pressing command option, J on Mac or ctrl shift J on Windows And Linux, then click the sources tab. The sources panel is where you debug JavaScript. It has three main parts at the top left. Here is the file navigator pane, where you can inspect the files that the page uses after clicking on a file.

You can see the contents of it here in the code editor pin and down here is the JavaScript debugging pane, which you’ll learn more about shortly. Note that when your dev tools window is wide, the JavaScript debugging pane moves to the right. If you take a step back and think about how the app works, it’s probably safe to guess that the incorrect sum gets computed in the click event listener that’s associated to the button.

Therefore, you want to pause code right when the eventlistener executes event.Listen their breakpoints. Let you do exactly that. Expand the eventlistener breakpoint section then expand the mouse category then check the click check, box, dev tools now pauses on the first line of any click event listener that executes back in the demo, click the button again and dev tools. Pauses on the first line of this on-click function, the blue highlight indicates what line of code you’re currently paused on, if you’re paused on a different line of code press resume script execution until you’re paused on the correct line you paused on the wrong line, because you Have a Chrome extension which registers click event listeners on every page that you visit.

If you try the workflow I’m describing in an incognito window, you can see that you always pause on the correct line of code event. Listener, breakpoints are just one type of a breakpoint. Dev tools offers many other types. For example, you can set a breakpoint on a specific line of code or when a Dom node changes or when an exception gets thrown and so on. After this tutorial, I recommend checking out our breakpoints guide, which teaches you when and how to use each type.

The link to that guide is in the description too, I’m paused in the click listener, and now I want to execute the code one line at a time. The code stepping control is right here. Let you do that click. The step into next function call button to investigate a function further. For example, when I step into the inputs our empty function, it jumps me to the first line of that function when I’m confident that a function is working as expected, I can click the step over next function call button the function executes, but I don’t walk through It line by line, for example, if I click to step into the next function, call this line here would be highlighted, blue meaning.

This is where I’m currently paused, but when I click step over next function, call the function executes to completion and I pause them. The next line of the function that I’m currently stepping through last suppose, I’m stepping through a function, and I realize it’s not relevant to my bug. In that case, I can press step out of current function and dev tools executes the rest of the function. If this doesn’t make complete sense right now, I recommend creating a snippet, which is a little block of JavaScript code, that you can execute at any time set a breakpoint and your snippet and play around with the code stepping controls yourself in order to understand how they All work back in the script, I can tell that the bug is probably somewhere in the update label function rather than stepping through a bunch of irrelevant code.

I can set a line of code breakpoint right around where the bug probably occurs to do that. I just click the line number next to the code. This blue icon indicates that there’s a breakpoint on this line when I press resume script, execution dip tools runs all the code up until that lime and then pauses before that line executes over here in the JavaScript debugging pane. I can see the call stack that caused this code to execute.

I can click on the functions to see where each one got caught. The scope section shows me all the local and global variables that are currently defined at this moment in time. I can click on values to edit them, but I’m not going to do that right now. However, when I look at these values, they look suspicious they’re, wrapped in double quotes, which means that their strings. This could be the cause of the book.

I’r going to investigate this further over in the read expressions section here. I can read the values of variables over time. You can store any valid JavaScript expression here, for example, I click, Add expression, then type type of sum then press enter, and I can now see the value of that expression, as I suspected sum is a string when it should be an integer. Now I’m going to open up the console to test out a potential fix for the book when I’m paused on a line of code, the console has access to all the variables that are currently in scope.

For example, when I evaluate addend 1, it returns 5. I think I can fix this bug by converting the addend 1 and adding two variables two integers before adding them. So let me try that now yep that fixes it. I can verify that this change fixes the bug by editing the code directly from dev tools. First I’ll resume script. Execution then make my change, save the change. I press command s on Mac or ctrl s on Windows and Linux.

Then I click deactivate breakpoints so that I can test out the app without triggering the breakpoints I’ve set. Now the app sums up numbers as expected, all right, you now have an excellent foundation and how to effectively debug JavaScript using dev tools from here. I recommend learning about all the breakpoints that dev tools has to offer. As I mentioned before, we also have a JavaScript debugging reference where you can learn about literally every feature related to debugging in dev tools.

Links to both are in the description thanks for reading and happy bug, hunting


 

Categories
Online Marketing

Introduction to Java Based Web Development

Piercy’s Introduction to Java Based Network Appplications In this article, We’re going to look at different application. Architectures And you’ll understand the different models for java based web applications. Tim Berners-Lee, a British scientist at CERN the European Organization for Nuclear Research, invented the world wide web. In 1989 He created the web to support better information sharing between scientists around the world.

On April 30, 1993 CERN put the World Wide Web software in the public domain. Cern made the next release available with an open license and the rest is history, And now we can build our own web applications. The basic Web architecture Is a type of client/server network architecture With a client/server network. Some computers on the network will make requests for things. These are the clients, Other computers will act to serve up a response to the client.

These computers are known as servers, For example, when you type or click in your browser for your favorite web site, a request is sent to a server. The server will then try to provide the item or items that are requested In the beginning of the web. Most requests were for static pages. This means we were simply requesting the contents of stored files that did not change, often to be sent back And displayed in our browser.

A dynamic web application is one where the output provided to the client may be different at any moment, based on the current status of data Data that can determine what is viewed by the client may be data provided by the user in a form Data stored. As cookies in the clients, computer and accessed by the application, Current data, like data time of day, the browser used or the operating system Or client behavior on the view that triggers related updates In the dynamic web model, a client will make a request which is sent Over the Internet to the web server, The web server will determine which application to run and will request that the application do stuff At some time.

While the application is processing, it may access storage to get any relevant stuff. It needs to complete the processing. Data can be returned from storage And then the application will create its output. The output will be passed back to the web server, which will in turn, use the output to create a response which will be sent back to the client. The browser will receive the response and render the results We can use Java to make dynamic web applications.

With Java, we have a few different architectures that we can choose from The most basic is known as the Java Model 1 architecture. The model 1 architecture is sometimes adequate for web applications with limited processing requirements With Model 1 JSPs are used to handle all processing, as well as presentation for the application. Jsps are capable of connecting and directing the use of Java classes, which can be applied to take care of the business logic of the application.

Storage can be hard drives with flat files or a database With the Java Model 1 architecture. A request is made by the client. The web server will then request that the JSP do some things. The JSP will start the processing and work with the model which may try to get stuff from storage. Data can be passed back to the application. The JSP will use the data to create the output and then pass the output back to the web server.

The web server will create the response and then pass that back to the client over the Internet, which will render the results When we need more processing power. We’ll use the Java Model 2 architecture. The Java Model 2 architecture follows the more general Model-View-Controller pattern. This pattern is used when we need more significant processing on the server side. The separation of concerns that is inherent in the MVC makes these types of applications easier to create and maintain With the MVC pattern.

The model consists of business objects In the Java world. The model is usually a collection of Java classes. The controller receives the initial request from the web server and makes sure that the application logic is carried out In the Java version. The controller concern is carried out using a Java Servlet component. The view is the component that makes sure the results of processing are ready to send back to the client Java.

Server pages can be used here. The best practice with MVC is to construct each component as independently or loosely coupled as possible, so that, if you need to change one component, Changes to other components are minimized. As with the other architectures, a request can be made, buy the client to the web server. The web server will then ask the servlet or controller to do stuff. The servlet may access Java classes from the model which in turn may access storage to get stuff Once processing is complete.

The results will be passed to the JSP to prepare the output. The output will be passed back to the web server And then the web server, as in other models, will create the response to send back to the client. Many web applications require configuration information so that the server will know how to set up, deploy and connect. The various components of the application With older Java applications, all configuration information is stored in a file called “ web.

Xml.”. The web.Xml file is also referred to as the deployment descriptor The web.Xml file must reside in the WEB-INF directory. You can find this directory in the web content. Folder of your Eclipse projects Here is an example of a web.Xml file for a simple application. This one does not require a lot of configuration. We see a section that defines the welcome file. The welcome file list defines the file names that can be used to indicate which file should run when the application starts.

The three shown here are default, But if you create a web.Xml file, you can edit these to use any welcome file, name that you prefer. This section of the web.Xml file defines How we will access the servlet Note. There are two parts. This part defines a servlet name converter and connects it to the Java class, where we have actually created our servlet TemperatureConversionServlet. The second section connects a URL pattern.

The thing you put in the browser to get the servlet running Here, the URL pattern is /Convert and we are connecting it to the servlet that we named above called converter, So in affect when Convert is sent as a request to the server. It will then run the TemperatureConversionServlet servlet class, Beginning with servlet API 3.0. A new Java API package was introduced called javax.Servlet.Annotation.

This API provides annotation types that can be used for annotating a servlet class. This makes it easier to connect our servlets to URL mappings. If you use annotation, then the deployment descriptor or the web.Xml file is not required to connect your servlets to URL mappings, But we should use later versions of servers For Tomcat. You must use Tomcat 7.0 or later Here’s an example of some of the code from a servlet On line 15.

You can see an example of an annotation, In this case the annotation simple says that there is a URL pattern /Convert. It also provides a description for this servlet. This one line replaces about seven of the lines in the web.Xml file. On the previous slide, This line will indicate to the server that, when the URL mapping /Convert is called or requested, then this particular servlet in which the annotation is embedded, will run With these models in mind, you are now ready to get started.

Learning about the various components of the Java web application architectures For more information. Please visit the references shown here. This article was written, narrated and produced by Dr. Craig A. Piercy. This has been a Piercy Production.