Giới thiệu 5 Tips để debug Drupal front-end với Chrome DevTools

5 of my favourite keyboard shortcuts in Chrome DevTools. I used them all the time to find bugs in JS, HTML and CSS

1. CMD + ALT + F.  (Windows/Linux: CTRL + SHIFT + F)

A global search. Search in every asset HTML,CSS and JS.  Useful when you want to check if the browser is loading the changes you are doing, or to find something in the JavaScript code to place a breakpoint. Specially useful in production, when JavaScript files are aggregated, don't try to find the code manually. Use the global search.

2. CMD + Z (Windows/Linux: CTRL + Z)

Yes, the traditional 'undo' command. Did you know you can undo the CSS changes in DevTools?

3. CMD + S (Windows/Linux: CTRL + S)

Edit the JavaScript files inside DevTools (Source Tab). Then save the changes (CMD + S) . You will see in the console "Recompilation and update succeeded." and the background color will change.  This trick is not very useful alone. But you can use it while debugging with breakpoints.  This tip is really useful to debug on-the-fly in production sites.

4. ALT + Click  (Windows/Linux: CTRL + ALT + Click)

This trick is awesome for severe cases of HTML divitis. Press ALT and click at the same time on the arrow, it will expand all their children.

5. debugger;

This is not a keyboard shortcut. It's a statement defined ECMAScript 5, so it works in all modern browsers. Place the string debugger in your JavaScript code, and it will have the same effect than a breakpoint, halting JavaScript execution and opening the browser's debugger.