Tắt Developer Tools Của Google Chrome

Chrome Developer Tools (hay có cách gọi khác là Chrome DevTools) được hiểu dễ dàng và đơn giản là một bộ các công cụ dành cho các xây dựng viên website. Nó được tích hợp sẵn ngay bên phía trong trình săn sóc Chrome khi bọn họ cài đặt. Trong bài viết này, hãy cùng khám phá những kiến thức và kỹ năng Cơ phiên bản Về Chrome DevTools cùng Ứng Dụng trong một trong những công việc.

Bạn đang xem: Tắt developer tools của google chrome

Đối với một nhà phát triển website thì việc thực hiện Chrome Devtools hoàn toàn có thể được coi như một quá trình mặc định hằng ngày. Nội dung bài viết này sẽ tin báo tổng quan tốt nhất về Chrome Devtools, đào bới những developer, tester gồm nhu cầu tham khảo thêm về nguyên tắc này.

Cơ phiên bản về Chrome DevTools: cách truy cập

Vì được tích thích hợp sẵn ngay bên phía trong trình duyệt, chúng ta cũng có thể dễ dàng tìm và truy cập bộ điều khoản này. Có một vài phương pháp để mở Chrome Devtools như sau:

Mở tự browser menu: Click vào thực đơn góc đề xuất chọn More tools => chọn Developer toolsMở bằng menu: bấm chuột phải vào màn hình Chrome và chọn InspectSử dụng tổng hợp phím tắt:Đối với Mac: Cmd + Opt + IĐối với Windows: F12 hoặc Ctrl + Shift + I

Sử dụng Chrome DevTools như vậy nào?

Khi mở Chrome DevTools thành công, ta đang thấy lao lý này bao gồm những tabs cơ bạn dạng như sau:

ElementsConsoleSourcesNetworkPerformanceMemoryApplicationSecurityLighthouse

Trong bài viết Cơ bản Về Chrome DevTools cùng Ứng Dụng, bọn họ sẽ chỉ tò mò 4 tabs thường xuyên được áp dụng trong công việc. Đó là: Elements, Console, Sources, Network.

1. Elements: 

Tab Element mang lại phép bọn họ thấy tổng thể html của một trang web, bao hàm cả css và những thuộc tính của trang đó. Ở tab Elements, chúng ta có thể thực hiện được một số quá trình cơ bản như sau:

Kiểm tra trực thuộc tính, css, html của 1 thành phần nào đó trên trang. Cách thức: rê chuột lên yếu tố mong kiểm tra và nhấn vào phải, chọn inspect.Kiểm tra trực thuộc tính, css, html của 1 thành phần nào đó bởi cách nhấp chuột phải vào yếu hèn tố ý muốn kiểm tra, lựa chọn inspect.

Chỉnh sửa CSS của một trang nhằm theo dõi sự thay đổi một nhân tố trên trang sẽ tác động như thế nào. Cách thức: chọn Inspect vào thành phần phải chỉnh sửa, trên bối cảnh của Elements dịch rời tới tab Styles, điều chỉnh css theo ý bạn muốn.Chọn Inspect vào thành phần đề nghị chỉnh sửa, trên bối cảnh của Elements di chuyển tới tab Styles, điều chỉnh css theo ý chúng ta muốn.

Tương tác trên những thành phần của website hoặc khi ao ước kiểm tra code mới chuyển động thế nào trước lúc bắt tay vào thực hiện. Biện pháp thức: sử dụng công dụng inspect đến các thành phần cần kiểm tra, thêm bớt điều chỉnh đoạn code trên vị trí mong ước trên bối cảnh devtools.

Xem thêm: Công Nghệ Ảo Hóa Là Gì - Tổng Quan Về Công Nghệ Ảo Hoá Vmware

Sử dụng tính năng inspect đến các phần tử cần kiểm tra, thêm bớt kiểm soát và điều chỉnh đoạn code trên vị trí mong ước trên đồ họa devtools.

2. Console: 

Console là tab đang hiển thị tất cả các message, error xảy ra bởi những thành phần trên website. Không tính ra bạn cũng có thể tự thêm các đoạn js để tác động vào ngẫu nhiên thành phần làm sao trên website phụ thuộc khung console này.

3. Sources: 

Mục Sources sẽ chất nhận được xem và khám phá tất cả tệp tin được sử dụng phía bên trong website. Đây cũng là vị trí để debug 1 tác dụng nào đó trong quy trình phát triển. Một số tác vụ có thể thực hiện trên tab Sources hoàn toàn có thể kể đến như:

Xem một file bất cứ được nhúng trên trang web đó.

Tìm kiếm file. Phương pháp thức: ấn chọn ký kết hiệu 3 vệt chấm dọc, chọn mở cửa File hoặc phím tắt Ctrl + phường Nhập tên file đề nghị tìm vào form nhập.Chọn cam kết hiệu 3 vết chấm dọc, chọn open File hoặc phím tắt Ctrl + p Nhập tên file phải tìm vào khung nhập.

Bên trong Source còn có một chức năng mở rộng mang tên Pretty Print. Nó có thể chấp nhận được sắp xếp lại hiển thị HTML và CSS của website với một cấu trúc rõ ràng, nhỏ gọn hơn. Ta có thể tận dụng công dụng này để xử lý việc tra cứu kiếm các file sinh hoạt dạng nén.Ấn chọn ký hiệu bên dưới màn hình để kích hoạt Pretty Print

4. Network 

Ngoài ra, Network còn cho họ lựa chọn hiển thị theo bộ lọc các request đang được gọi, với các lựa chọn như JS, CSS, Image,… Click chọn vào từng một số loại đối tượng bạn có nhu cầu lọc nhằm thu hẹp hiệu quả trả về.

Chúng ta cũng rất có thể nhập tên request vào ô nhập nhằm filter theo thương hiệu theo như hình bên dưới

Kết

Trên đây là những thông tin cơ phiên bản nhất về Chrome Devtools, tương tự như một số tính năng cơ phiên bản của 4 chức năng Elements, Console, Sources và Network. Hy vọng nội dung bài viết phần nào giúp ích cho các bạn lập trình viên cũng tương tự kiểm thử viên đang bắt đầu tìm gọi về cách thức này.