How to use Chrome DevTools like a Pro

As the name implies Chrome Developer Tools is a tool that allows web developers to interfere and manipulate applications via the browser. With this tool you can:

  • Manage interface problems
  • Debug Javascript Code with using breakpoints
  • Optimize your code

To open DevTools, you can right-click anywhere on the page and select inspect element or you can choose the “tools > developer tools” option from the top right menu.

The following examples are using the Canary version of Google Chrome.

1. Quick-edit a HTML Element

To try it:

  • Select the “Elements” panel.
  • Choose a DOM element within the Elements Panel editor.
  • Double click on the opening tag and edit it.

When you are finished, the closing tag is automatically updated.

2. Go to a Line Number

You can use this feature in the “:linenumber:columnnumber” format from the Sources panel.

To try it:

  • CMD + O

3. Expand All Child Nodes

To try it:

  • Select the “Elements” panel.
  • Choose a DOM element and Alt + Click the arrow within the Elements Panel editor to expand all child nodes.

4. Change DevTools Positions

To try it:

  • CMD + Shift + D

Dock options:

  • Undock DevTools
  • Dock to bottom
  • Dock to right

5. DOM Search by CSS Selectors

To try it:

  • CMD + F / CTRL + F and enter your class name or id name base search selector.

6. Material and Custom Color Palettes

You can click on the little switcher icon in front of hex code. you can choose from the following:

  1. Page Colors: This palette is auto generated from your web site (in your CSS).
  2. Material Design: This palette automatically generates primary colors from The Material Design palette.

7. Multiple Cursor

Move the cursor with the CMD + Click to add multiple cursors. You can alsoundo your last selection with CMD + U.

8. Copy Image as Data URI

To try it:

  • Select “Network” panel.
  • Choose your image within the Resources Panel
  • Right click and copy it as a Data URI (base 64 encoded)

9. Triggering of Pseudo Classes

To try it:

  • Right click in the left panel and select “Force Element State”.
  • Alternatively, the toggle element state icon can be clicked in the right panel.

10. Column Selection by Dragging

To try it:

  • Select “Sources” panel.
  • Choose your file within the Sources Panel editor.
  • Hold Alt and dragging the mouse.

11. Get the current element with “$0”

To try it:

  • Select “Elements” panel.
  • Choose a DOM element within the Elements Panel editor.
  • Click Console and write $0 to access it.

12. Reveal in Elements

To try it, if you choose an a DOM node:

  • Right click on it within the Console panel.
  • Select “Reveal in Elements Panel”.

13. View Event Listeners

To try it:

  • Select the “Elements” panel.
  • Navigate to the Event Listeners and choose an event.
  • You can also view source by right click and choose “Show Function Definition” in context menu.

14. Easing Previews

To try it:

  • Click the easing icon (purple icon) and see a preview.
  • You can view it via choose other previews or you can set new easing format.

15. Media Query

To try this:

  • In Device Mode, click the icon (‘bars’) in the upper left corner of the page.
  • Click the breakpoint (‘blue’, ‘green’, ‘orange’) bars and change.

If you right click on a bar, you can reveal its position within the source code.

16. Network Filmstrip

“Film Strip” shows page rendering screenshots and times from start to finish. You can click a screenshot and view in the timeline-style view.

To try this:

  • Select “Network” panel.
  • Click “Camera Icon”.
  • Reload page.

17. Copy Response

You can copy the response/request headers of a network resource.

To try it:

  • Select “Network” panel.
  • Choose your file within the Resources Panel.
  • Right click and click “Copy Response”.

18. Run Predefined Snippets

To try it:

  • In the left sidebar: Sources > Snippets
  • Right click > Select New
  • Enter a file name and write your snippets in the right panel
  • Right click on the snippet and select Run

19. Device Emulation Sensors

You can also simulate mobile devices sensors like:

  • Touch Screen
  • Geolocation Coordinates
  • Accelerometer

To try this:

  • Select “Elements” panel.
  • Click “Esc” and choose “Emulation > Sensors”

20. Workspaces

To try this:

  • Select “Sources” panel.
  • Right click within sources pane and choose “Add Folder to Workspace”
  • Choose your file and right click > Map to Network Resources
  • Change your file code and view it.


Fonte: How to use Chrome DevTools like a Pro — JotForm — Form Builder — Medium

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.


When speaking about design, there is one company that is impossible to go without. Apple values design – being a new product, a fancy catalog or their website – there is always something to admire.

This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.

So go ahead and download the example source code and continue with the first step.

Step 1 – XHTML

There is no need for a database nor a PHP back-end for this gallery. This means that it is really easy to incorporate into an existing site – you just have to change a few lines of html code.

Lets take a closer look at the XHTML markup:


<div id="main">

<div id="gallery">

<div id="slides">

<div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>


<div id="menu">

<li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>




The idea is simple – there are two main container DIVs – the one with id=”menu” holds the thumbnails, and the other –“slides” holds the slides themselves.

To add a new slide, you’ll just have to add new elements to both containers. The slides are JPGs, and the thumbnails are transparent PNGs, but you can use any image type you want.

You can even put any kind of HTML in as well. For example you could make a certain slide into a hyperlink by just putting the image inside of an anchor tag.

That said, it is important to have the width and height attributes set up of the slide images – it is used by jQuery to determine the width of the sliding area, as you’ll see in a moment.

Also notice that the thumbnail LI elements. The first one is assigned a class name of fbar , used to only show a vertical dividing bar, and the others are assigned a menuItem class – used as the slideshow control buttons.

Now lets continue with the next step.

Step 2 – CSS

Lets see what lays hidden in our stylesheet. I’ve only included the styles that are directly used by the gallery. You can view the rest of the styles, used to show the demo, in demo.css.


	/* Page reset */

	/* Setting default text color, background and a font stack */
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;

/* Gallery styles */

	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;

	/* CSS3 Rounded Corners */



	border:1px solid white;

	background:url(img/panel.jpg) repeat-x bottom center #ffffff;

	/* The width of the gallery */

	/* This is the slide area */

	/* jQuery changes the width later on to the sum of the widths of all the slides. */


	/* This is the container for the thumbnails */


	/* Every thumbnail is a li element */

	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;

	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;

li.act a{

	/* The left-most vertical bar, next to the first thumbnail */
	background:url(img/divider.png) no-repeat right;

li a{
	background:url(img/divider.png) no-repeat right;

a img{

We have used a number of CSS3 specific properties in this slideshow gallery:

  • box-shadow, which makes the gallery cast a light shadow around its edges. To use it, you have to provide offsets by X and Y (0 0 here), the blurring (3px in this example) and the color of the shadow;
  • border-radius, which rounds the bottom corners of the gallery.

Unfortunately, these properties are only supported in Safari, Chrome and Firefox for now. However in the rest of the browsers you still have a completely functional gallery.

Now it is time for some jQuery magic.

Step 3 – jQuery

As I already mentioned, this gallery does not use any server-side code, so it is all up to the front end to make the slideshow tick.


	/* This code is executed after the DOM has been completely loaded */

	var totWidth=0;
	var positions = new Array();

	$('#slides .slide').each(function(i){
		/* Loop through all the slides and store their accumulative widths in totWidth */
		positions[i]= totWidth;
		totWidth += $(this).width();

		/* The positions array contains each slide's commulutative offset from the left part of the container */

			alert("Please, fill in width & height for all your images!");
			return false;


	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e){

		/* On a thumbnail click */

		var pos = $(this).parent().prevAll('.menuItem').length;

		/* Start the sliding animation */

		/* Prevent the default action of the link */

	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */

The main idea behind this script is to loop through all the slides, sum up their widths and assign the sum to the slides container – the DIV with the id=”slides“. Because the slides are floated to the left and have enough room, they align next to each other.

Later, when you click a thumbnail, the script calculates which slide to show and scrolls the #slides div by assigning a negative margin via the animate method.

And with just 40 lines of code, the Apple-like slider gallery is finished!


In three easy steps we created a beautiful Apple-style slideshow gallery. It can be easily included into any website by just adding a few lines of code.

Fonte: A Beautiful Apple-style Slideshow Gallery With CSS & jQuery | Tutorialzine