Google Chrome là một trong những trình duyệt web phổ biến để phát triển web, do đó là các tính năng nâng cao. Công cụ dành cho nhà phát triển Chrome có thể rất hữu ích trong khi gỡ lỗi. Hầu hết chúng ta đều biết rằng chúng ta có thể chỉnh sửa CSS trực tiếp bằng cách sử dụng Công cụ Chrome Dev, nhưng có nhiều mẹo hơn mà chúng tôi sẽ chia sẻ với bạn hôm nay.
Mẹo về Công cụ phát triển Chrome
Có nhiều thủ thuật không xác định và ẩn của Chrome Dev Tools và chúng tôi sẽ xem xét các thủ thuật hữu ích nhất trong số đó. Để mở công cụ nhà phát triển trong Chrome, nhấn F12 trên bàn phím của bạn và thử các thủ thuật sau đây.
1. Tìm và mở bất kỳ tệp nào
Khi chúng tôi đang phát triển web, chúng tôi xử lý nhiều HTML, CSS, JS và các tệp khác. Khi chúng tôi muốn gỡ lỗi mọi thứ, chúng tôi mở các công cụ Chrome Dev. Bạn có thể nhanh chóng tìm kiếm và tìm thấy tệp cụ thể để giúp công việc của bạn dễ dàng hơn. Chỉ cần nhấn Ctrl + P và bắt đầu nhập tên tệp. Điều này giúp bạn tìm tệp cụ thể từ danh sách tệp.
2. Tìm kiếm trong tệp nguồn
Trong thủ thuật trước, chúng tôi đã biết cách tìm kiếm một tệp cụ thể. Bạn thậm chí có thể tìm kiếm một chuỗi cụ thể trong tất cả các tệp đã tải. nhấn Ctrl + Shift + F để tìm chuỗi trong tệp. Nó cũng hỗ trợ các biểu thức chính quy.
3. Đi đến dòng cụ thể
Khi bạn đã mở bất kỳ tệp nguồn nào và muốn di chuyển đến dòng cụ thể, sau đó nhấn Ctrl + G và cung cấp số dòng và nhấn enter.
4. Chọn các phần tử DOM trong tab Console
Dev Tools cũng cho phép bạn chọn các phần tử trong bảng điều khiển.
- $() – Trả về lần xuất hiện đầu tiên của bộ chọn CSS phù hợp.
- $$() – Nó trả về mảng các phần tử khớp với bộ chọn CSS đã cho.
Để biết thêm các lệnh giao diện điều khiển, hãy truy cập bài đăng này.
5. Sử dụng nhiều mẫu
Đôi khi, bạn muốn đặt nhiều dấu nháy ở các vị trí khác nhau và bạn có thể dễ dàng thực hiện điều đó trong các công cụ của Chrome Dev bằng cách giữ Ctrl và nhấp vào nơi bạn muốn đặt chúng. Sau đó bắt đầu viết và bạn sẽ thấy được đặt ở những nơi khác nhau được chọn.
6. Bảo tồn Nhật ký
Nhật ký lưu giữ giúp bạn duy trì nhật ký ngay cả khi trang được tải. Chọn tùy chọn bên cạnh Bảo tồn nhật ký trong Nhật ký Console và nhật ký được giữ nguyên. Điều này sẽ hiển thị nhật ký trước khi trang không tải và hữu ích để điều tra lỗi.
7. Sử dụng trình tạo mã dựng sẵn
Công cụ Chrome Dev có trình tạo mã được tạo sẵn có tên là in đẹp “{}”. Công cụ dành cho nhà phát triển hiển thị mã được thu nhỏ và không dễ đọc như vậy. Nhấp vào nút in đẹp được hiển thị ở dưới cùng bên trái trên tệp nguồn đã mở, để hiển thị tệp nguồn ở định dạng có thể đọc được của con người.
8. Trang web của bạn có thân thiện với thiết bị di động không? Kiểm tra tại đây
Công cụ Chrome Dev cũng cho phép chúng tôi kiểm tra xem trang web có thân thiện với thiết bị di động hay không. Bạn có thể kiểm tra xem trang web của bạn trông như thế nào trên các thiết bị khác nhau. Truy cập các công cụ Chrome Dev và dưới Thi đua , bạn có thể tập tin các thiết bị khác nhau. Chọn thiết bị bạn muốn và kiểm tra trang web của bạn trông như thế nào trong thiết bị đó.
9. Thi đua cảm biến và vị trí địa lý
Bạn thậm chí có thể mô phỏng các cảm biến như màn hình cảm ứng và gia tốc kế. Bạn thậm chí có thể mô phỏng vị trí địa lý. Để làm điều này, hãy đi đến Thi đua -> Cảm biến.
10. Chọn lần xuất hiện tiếp theo của từ hiện tại
Nếu bạn muốn thay thế từ Trong tất cả các lần xuất hiện, hãy chọn từ đó và nhấn Ctrl + D để chọn lần xuất hiện tiếp theo của từ đã chọn. Bạn có thể chỉnh sửa từ đó trong tất cả các lần xuất hiện trong một lần chụp.
11. Thay đổi định dạng màu
Chỉ dùng Shift + Click trên bản xem trước màu để thay đổi thay đổi giữa rgba, định dạng thập lục phân và hsl.
12. Thêm thay đổi vào tệp cục bộ thông qua không gian làm việc
Chúng tôi có thể chỉnh sửa các tệp nguồn và thực hiện một số thay đổi trong CSS, Java Script và trong các tệp khác trong các công cụ của Chrome Dev. Để thêm những thay đổi này vào các tệp cục bộ, thì ở đây không cần sao chép dán các thay đổi từ không gian làm việc vào các tệp trên đĩa. Công cụ Chrome Dev cho phép bạn kết hợp các tệp và cập nhật tệp cục bộ với những thay đổi bạn đã thực hiện trong các công cụ dành cho nhà phát triển. Để thực hiện việc này, nhấp chuột phải vào tệp nguồn ở bên trái trên Nguồn và chọn Thêm thư mục vào không gian làm việc.
Để biết thêm thông tin về không gian làm việc, hãy truy cập Chrome.com.
