Windows

Của Chrome Development Bạn có thể gỡ lỗi mã dễ dàng bằng cách sử dụng các mẹo và thủ thuật của Công cụ phát triển Chrome trên máy tính Windows của bạn. Tìm kiếm tệp, thay thế từ nhiều lần xuất hiện và nhiều hơn nữa!

Реклама подобрана на основе следующей информации:

Реклама подобрана на основе следующей информации:

Mục lục:

Anonim

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 Chrome Dev Tools, nhưng có nhiều mẹo 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 Công cụ 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. 1. Tìm và mở tập tin bất kỳ

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 thấy 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 được 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 chuyển sang dòng cụ thể, sau đó nhấn

Ctrl + G và nhập số dòng và nhấn enter. 4. Chọn các phần tử DOM trong tab Console

Công cụ tìm kiếm 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 dấu mũ

Đô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ể thực hiện điều đó dễ dàng trong các công cụ Chrome Dev bằng cách giữ phím

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. Nhật ký bảo tồn

Bảo tồn nhật ký 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ý bảng điều khiển và nhật ký được giữ nguyên. Thao tác này sẽ hiển thị nhật ký trước khi trang không tải và hữu ích để điều tra các lỗi. 7. Sử dụng công cụ tạo mã có sẵn

Công cụ Chrome Dev có trình tạo mã được tạo sẵn có tên

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ấ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à trong tab

Thi đua , bạn có thể gửi nhiều thiết bị khác nhau. Chọn thiết bị bạn muốn và kiểm tra xem trang web của bạn trông như thế nào trong thiết bị đó. Để biết thêm thông tin, hãy xem video sau.

9. Giả lập 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ý. Để thực hiện việc này, hãy truy cập

Thi đua -> Bộ 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. Định dạng màu thay đổi

Chỉ cần sử dụng

Shift + Nhấp 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à định dạng 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 tab

Nguồn và chọn Thêm thư mục vào vùng 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.