Responsive Web Applications and GoogleChrome
The Latest version of Chrome has introduced an advanced features that will asset you to develop a responsive website, which is one of an essential demand of clients when they are asking you for web development, due to increased use of web surfing on various instruments, i.e. mobiles, desktop, tablets all are having different resolutions.
By writing above code and creating a CSS class with some basic rules like float the navigation links and creating two sections, which are positioned to each other, will generate the output as below. After getting following output, you can start to experiment with your HTML and CSS.
Firstly place media queries break points. Make sure to select the breakpoint based on the content and at where the content is not looking perfect. Note: you should not assume that 2014×768 is a perfect resolution as it is popular.
Setting the Viewport using Chrome
The very first step is that we break the site by selecting break points in small portions to experiment with that. But what happen if we break the content we can’t see the exact viewport of the browsers, for that we need to resize the browser’s window.
Chrome Solution: Chrome provides the developer tools panel, from where you can increase the size of the viewport easily that you can see the changing size of the viewport in the top right corner of the browser. This solution removes your bothersome manual checking work.
Now look at the two sections of the content which have become so squashed by 500px. Here we need to increase the space between both content by adding the Media query.
After adding above media query we can see the space, but as we go a bit below that for an e.g 540px, horizontal navigation bar will appear at the bottom of the viewport. For that again we need to add a new media query definition to solve that problem.
After completing the above coding you can see the web page that will now work for a wide range of the screen. This was the very simple example with two break points, but yes, you can do for any of break points with same process regardless of the size of the site.
Device Simulation using Chrome
Problem: Often we get the queries from our clients that your application is not running properly on Apple iphone5 or Google Nexus S.
This is very obvious while you are creating a web application by considering every single mobile and tables. You need to set exact screen resolution and right http headers to make it fix. You can do it easily by getting a close look on how your web application will see on any device.
Chrome Solution:Chrome can set the exact screen resolution and can create exact HTTP header for getting any device view. For an example, if you want to simulate Google Nexus S. Go to the Developer tools that will open a drawer panel where you will find the Emulation tab at the bottom line of the drawer, click on the emulation tab you will have all the device in the drop down menu and select Google Nexus S to see how your web application will look at the screen of the Google Nexus S, This is possible because chrome applies all the settings in the Screen, User agent and Sensors Sections according to the device you select.
What you can do with a Modification panel of Chrome
If your website is responsive, but you want to check different styling to your website then you can do it by using an element panel of Chrome. Using an element panel of Chrome you can check what styles are applied to your webpage that you are seeing it at the right side and you can modify the style and see on the webpage simultaneously.
Finding certain CSS style using Chrome
Sometimes, what happens that in the large content you won’t be able to find a certain CSS type easily to do the modification due to lot of definitions. Google Chrome solves this problem with its filter field in the developer tools panel.
For an instant if you want to access the <section> tag which holds the concept class, you can achieve it by following process with ease.
Chrome has integrated JS debugging which helps to debug JS files. You can see details of the JS file in the chrome console and source viewer. You can see how the debugging works in the Chrome by the following example. In the below example we want to change Examples label to the awesome examples on the click event.
Once you complete the coding and run it in the browser, you will be able to debug it using Chrome. At below you can see how the code works.
In the above Example we are getting the same output for any click is: do nothing… , By this we can see that in our coding there is some error for what we are getting the same output, it seems that if the condition is being always false.
We need to set break points to see what’s going on. While we set the break points the debugger stops at our breakpoint and shows the local variables that we have defined. You can see that the Variable clicked points to the navigation element and not to the <a> element. This is the reason why we are getting the do nothing… every time. This can be solved by adding .nav a instead of .nav, as shown below.
This is fine when we work with small JS files because you know where to set the break points. But this is not going well, when we work on large files to set break points, its being quite problematic. For an instant If we start placing console.log code here and there and check the console. It may work, but as the size of your file will increase with lots of data, it would be difficult for you to filter data and bring out needed information. The solution for this issue is again Chrome. We can solve this problem by adding %c in the front of the text, which passed to the .log method and then attach a second parameter which contains our style
There is another method in which we can add. The two methods of console that is group and groupEnd , both give an ability to group our logs.
Chrome provides a library that combines both the styling and grouping of the output and Deb.js. You can use it by including a page before other scripts and attach .deb() at the end of the function, which we want to look over. By this library you can get the arguments passed to the function and you will get the nicely grouped and nested messages which make to follow applications easily.
Terminal and Chrome
The most astonishing feature that you would love to use during your web development is the extensions that Google Chrome provides for your ease. Chrome offers various installable programs and APIs that will serve you the best.
Second, most astonishing feature of the Browser is you can create your own extension for yourself only, and for that there is no need to learn any programming language. What you need to know is just HTML, CSS and JS (Java Script). You may have no idea how to create an extension. Well, here are the fundamentals about extension development.
YeZ! Is one of the powerful extensions for web developers, which have some special instruments made for developers. That brings terminal kind of functionalities into the developer tools panel by which a developer can implement shell commands and get their output in real time. But you can’t perform shell commands with this extension only because we don’t have an access to the operating system.
The solution for this bug is a Node.js module that will work as proxy. YeZ! Connects to the Node.js, the running application by web sockets. After that we can install the module by Node.js package manager using npm install –g yez.
Yez! Git Integration
YeZ! Holds a good Git integration system that shows us the branch in progress directory by which we can execute terminal commands and can have an output immediately as well we can see the terminal output in real time. We also can develop Node.js application. In general, we need to restart the Node.js process. But now, you can see everything inside the Chrome.
Chrome and HTTP request performance
All web developers need to perform HTTP request for all applications. May be for Rest API for a PHP script that we have which accepts POST parameters. You will find a Chrome with the cURL tool which is very popular for querying the web.
You don’t need to jump to the terminal if you are having a cURL, there is one more extension available is DHC. This extension provides you a full support to the HTTP request. By this we can change the request method, headers as well GET and POST parameters. This extension also displays requested result with its headers.
Testing With Chrome’s Web Driver
The last and most important phase of the website is testing. We need to taste user interface of the web application which we have created is working properly or not. This is done by Node.js module that control chrome and activate different actions like visiting a page, clicking on a link or filling a form. This Node.js module is known as Dalek JS which can be installed easily.
|npm install -g dalek-cli|
Here is an example that how everything works, Here is package.json file which have the following content:
Once you run npm , then install in the same directory. You will get dalekjs and dalek-browser-chrome into the node_modules folder. Add the test in the file called test.js and save it in the same folder. Below is the search functionality of GitHub
You can run above test by writing dalek./test.js –b in your console. Once you will fire above code DalekJS will launch an instance of the Google Chrome browser and opens the GitHub’ site. At the end Node.js close the window that is open. You will get the following output for the above code.
I wish my article would be useful for all the users of Google Chrome who were unaware with some hidden functionality of the Google Chrome. Now I am sure that you will agree with me that yes, Google Chrome can also play a major role in web development.