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

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

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

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.

alt_cmd.gif

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

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

ctrl_z.gif

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.

breakpoint.gif

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.

alt_expand.gif

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.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Quảng cáo việc làm

 

Thích hợp các bạn nữ mảng thợ may làm việc tại nước NGA

Đơn hàng Tuyển dụng 100 Thợ may đi Nga(đợt 1 tháng 3.2021, đợt 2 tháng 5.2021). Lương thực lãnh 800 USD, bao ăn ở, vé máy bay và visa, phí xuất cảnh(1800 USD)trả khi đi làm có lương. Bạn có thể liên hệ CÔNG TY qua Phone/Zalo: (+84) 944 225 212. Công ty sẽ tư vấn cho bạn.

Xem chi tiết: >>> https://bit.ly/3o9NOfR

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Drupal 8: quá tuyệt vời nhưng quá phức tạp

Drupal 8: quá tuyệt vời nhưng quá phức tạp

I'm happy that we have a real framework underneath Drupal now, one that doesn't assume the whole world is complete HTML pages rendered and sent all at once.

Bài 1 và 2: Hello World: Develop Node.js toàn tập

Bài 1 và 2: Hello World: Develop Node.js toàn tập

Mình sẽ thấy ở terminal ngưng lại không có dấu prompt. Có nghĩa program node.js đang chạy ngay trên terminal.

Export và import Drupal 7 nodes như thế nào ?

Export và import Drupal 7 nodes như thế nào ?

There are lots of ways to export configuration from one Drupal site and import into another; however, there are few ways to do the same with content. Here's a quick tip which has worked well for me.

BLOG POSTS

 

Wordpress Freelancer

 

Wordpress Freelancer