Các phím tắt Chrome DevTools tiết kiệm thời gian Đặng Như Ngọc · Đặng Như Ngọc 02:00 01/05/2018 5 giờ trước Không thể tưởng tượng được sự phát triển web hiện đại mà không sử dụng Chrome DevTools. Nhờ có giao diện người dùng sạch và cải tiến liên tục để đáp ứng nhu cầu trong thế giới thực, công cụ này đã trở thành môi trường phát triển sống vượt qua nhiều IDE hiện đại cả về chức năng và hiệu suất. Show Nhưng bạn làm việc hiệu quả như thế nào với DevTools trong quy trình phát triển hàng ngày của bạn? Tôi muốn chia sẻ một số phím tắt yêu thích của tôi sẽ giúp bạn làm chủ công cụ. Mở ngay lập tức DevToolsBạn có thể nhanh chóng mở DevTools bằng cách nhấn phím F12 . Trong hầu hết các trường hợp, bạn cũng muốn kiểm tra một yếu tố trên một trang. Có một phím tắt đặc biệt giúp bạn đến đó nhanh hơn: nhấn Ctrl + Shift + C sẽ mở DevTools và gọi công cụ kiểm tra. Tôi không biết về bạn, nhưng mỗi khi tôi sử dụng phím tắt này, tôi cảm thấy như một tay súng chuyên nghiệp! Vô hiệu hóa bộ nhớ cache để lấy lại sự tỉnh táoMột chu kỳ phát triển thông thường bao gồm sửa đổi các tệp trên hệ thống của bạn và tải lại trang để quan sát kết quả. Đã bao nhiêu lần bạn quan sát thấy những thay đổi đã lưu của bạn không hiển thị, chỉ để sau đó nhận ra rằng đó là do bộ nhớ đệm? Tự mình làm và chuyển một tùy chọn quan trọng: "Vô hiệu hóa bộ đệm" trong tab Mạng. Làm xong. Năng suất tăng, nhầm lẫn giảm. Và đừng lo lắng, tùy chọn này chỉ áp dụng cho trang hiện tại và chỉ hoạt động khi DevTools đang mở. Kéo bảng điều khiển lên bất kỳ tab nàoTôi thấy mình cần sử dụng bảng điều khiển khá thường xuyên để thao tác nhanh chóng các phần tử DOM, phân tích các biến hiện tại trong quá trình gỡ lỗi hoặc thực thi các chức năng từ ứng dụng. Rất may, tôi có thể hiển thị bảng điều khiển mà không cần rời khỏi tab DevTools hiện tại bằng cách nhấn ESC . Chỉnh sửa trang trực tiếpMột lợi thế lớn của việc sử dụng DevTools là khả năng chỉnh sửa trạng thái của ứng dụng "trực tiếp", điều đó có nghĩa là bạn sẽ thấy ngay các thay đổi của mình mà không phải tải lại trang. Bạn có thể sửa đổi các thuộc tính và nội dung của phần tử ngay từ bảng Thành phần bằng cách nhấp đúp vào mục bạn muốn thay đổi. Lưu ý rằng bạn không chỉ có thể thay đổi các giá trị thuộc tính mà cả tên thuộc tính hoặc thậm chí tên thẻ phần tử. Để thêm một thuộc tính mới, nhấp chuột phải vào một yếu tố và chọn "Thêm thuộc tính." Dưới đây là nhiều thủ thuật trên bảng điều khiển Elements để bạn thử:
Đi tới bất cứ điều gì!Hơn 10 năm trước, trình soạn thảo văn bản sáng tạo Sublime Text đã phổ biến mẫu "Goto Anything". Kết hợp giao diện người dùng sạch, tìm kiếm chuỗi mờ và phím tắt, nó cho phép người dùng chuyển ngay lập tức giữa các tệp, biểu tượng, dự án và dòng hoặc thậm chí gọi các lệnh khác nhau. Tính năng này được chứng minh là có giá trị đến mức nó được chấp nhận bởi các phần mềm khác. Chrome DevTools cũng không ngoại lệ và, hy vọng, bạn đã biết rằng bạn có thể nhanh chóng truy cập bất kỳ tệp nguồn nào bằng cách nhấn Ctrl + O và nhập một phần tên của nó. Bạn thậm chí không cần phải ở trên tab Nguồn! Nhưng bạn có biết bạn cũng có thể "đi đến" những thứ khác không? Khi xem tệp nguồn, Ctrl + Shift + O cho phép bạn chuyển sang hàm JavaScript hoặc quy tắc CSS, trong khi Ctrl + G nhảy tới số dòng được chỉ định trong tệp. Một bổ sung gần đây là Ctrl + Shift + P , cho phép bạn chuyển đổi giữa các bảng DevTools. Lưu ý rằng danh sách bao gồm tất cả các bảng: các bảng tiêu chuẩn như Các yếu tố, Mạng và Bảng điều khiển cũng như các bảng ít nhìn thấy hơn như Kết xuất, Giám sát hiệu suất, Thay đổi, Bảo hiểm hoặc Chặn yêu cầu. Tôi thấy lối tắt này rất tiện dụng, vì tôi không bao giờ có thể nhớ làm thế nào để mở tất cả các bảng phụ này bằng chuột. Gì? Bạn không có ý tưởng những tấm này thậm chí còn tồn tại? Không có gì! In đẹpTôi nghĩ rằng bản in đẹp là một trong những tính năng bị bỏ qua nhất của DevTools. Như tên cho thấy, nó sẽ in các tệp JavaScript hoặc CSS được nén khá hữu ích khi bạn cần gỡ lỗi mã sản xuất hoặc thư viện của bên thứ ba. Hơn nữa, số dòng từ dấu vết ngăn xếp ngoại lệ sẽ được tự động ánh xạ vào phiên bản in đẹp của tệp nguồn! Tìm định nghĩa hàmCó các chức năng như các công dân hạng nhất cho phép các mô hình lập trình chức năng mạnh mẽ trong JavaScript. Nhưng nó cũng có thể làm cho mã khó gỡ lỗi hơn, vì các hàm cư trú ở mọi nơi dưới dạng đối số hoặc thuộc tính của các đối tượng. Tìm ra trong thời gian chạy trong đó một chức năng nhất định ban đầu được xác định là một nhiệm vụ không tầm thường cho đến khi nhóm đằng sau DevTools thực hiện "Hiển thị định nghĩa chức năng". Có thể truy cập tính năng này bằng cách nhấp chuột phải vào bất kỳ giá trị chức năng nào khi kiểm tra một đối tượng trong bảng điều khiển hoặc trong trình gỡ lỗi. Tiết lộ trong Bảng điều khiển yếu tốTương tự, khi kiểm tra tham chiếu đến phần tử DOM, bạn có thể muốn tìm hiểu phần tử đó nằm ở đâu trên trang và kiểu nào được áp dụng cho phần tử đó. Tính năng "Reveal in Elements panel" thực hiện chính xác điều đó. Phần thưởng: Tìm hiểu những gì mớiMột phiên bản Chrome ổn định chính mới xuất hiện cứ sau 1-2 tháng và mỗi phiên bản đi kèm với các tính năng mới mà cả người dùng cuối và nhà phát triển đều có thể hào hứng. Không dễ để vượt lên trên tất cả các phiên bản mới nhất và lớn nhất với chu kỳ phát hành nhanh như vậy, vì vậy các phiên bản gần đây của Chrome đã kết hợp bảng điều khiển "What New" tiện dụng trong DevTools, nêu bật một số thay đổi quan trọng. Bảng điều khiển tự động bật lên trong Ngăn kéo DevTools mỗi khi Chrome được cập nhật lên phiên bản mới chính và ở đó cho đến khi bạn đóng nó. Nếu bạn vô tình đóng nó, bạn luôn có thể mở lại thông qua phím tắt Ctrl + Shift + P mà bạn vừa học! Để được cập nhật những tin tức mới nhất trong Chrome và Chrome DevTools, hãy theo dõi blog Cơ bản về Web của Google Developers . Thủ thuật DevTools yêu thích của bạn là gì? Chia sẻ trong các ý kiến.
1 hữu ích 0 bình luận 11k xem chia sẻ |
