Không có trang web nào được xây dựng hoàn hảo. Giống như tất cả các sản phẩm do con người tạo ra, lỗi mã là một phần của quá trình. Đó là lý do tại sao điều quan trọng là phải kiểm tra kỹ lưỡng bất kỳ trang web mới nào mà bạn xây dựng để đảm bảo rằng nó không có lỗi nhất có thể nhằm mang đến cho người dùng của bạn trải nghiệm tốt nhất có thể. 

Bạn không nên kiểm tra một trang web mà không thử bộ công cụ DevTools của Google Chrome trước. Chế độ nhà phát triển Chrome^(Chrome) cho phép bạn dùng thử và kiểm tra kỹ lưỡng một trang web mới (hoặc một trang hiện có) để tìm và sửa lỗi. Nó cũng có thể cung cấp cho bạn cái nhìn sâu sắc về cách các trang web khác đang chạy, bao gồm cả việc xem mã nguồn. 

Dưới đây là mọi thứ bạn cần biết về chế độ nhà phát triển trình duyệt Google Chrome , những công cụ mà nó có và cách sử dụng nó hiệu quả.

Chế độ nhà phát triển Chrome là gì?^{(What Is Chrome Developer Mode?)}

Khi chúng tôi đề cập đến chế độ nhà phát triển Chrome , chúng tôi không nói về cùng một chế độ nhà phát triển^{(same developer mode)} mà bạn sẽ thấy trên Chromebook^{(Chromebooks)} . Những gì chúng tôi đang đề cập đến là các công cụ phát triển Chrome mở rộng (được gọi là Google DevTools ) được tích hợp sẵn trong chính trình duyệt.

Đây là những công cụ được thiết kế để kiểm tra, phân tích và cố ý phá vỡ (nếu bạn cần) một trang web bạn đã tải trong trình duyệt Google Chrome cho mục đích thử nghiệm. Ở cấp độ cơ bản, bạn có thể sử dụng DevTools để xem mã nguồn của một trang web, cho phép bạn xem qua để xem cách một trang web đã được xây dựng và nó chạy tốt như thế nào.

Tuy nhiên, Google DevTools^{(Google DevTools)} cung cấp nhiều hơn thế. Bạn có thể sử dụng chế độ nhà phát triển Chrome để thay đổi một trang sau khi trang được tải, chạy các lệnh của bảng điều khiển Google Chrome để kiểm soát và thao tác trang, cũng như chạy các bài kiểm tra tốc độ và mạng để theo dõi lưu lượng truy cập web.

Bạn cũng có thể mô phỏng các thiết bị khác, bao gồm các hệ điều hành và độ phân giải màn hình khác nhau, trong chế độ Chrome DevTools . Điều này cho phép bạn xem liệu một trang web có thiết kế web đáp ứng hay không và nơi nội dung và bố cục của trang web sẽ thay đổi tùy thuộc vào độ phân giải hoặc loại thiết bị.

Mặc dù những công cụ này nhắm đến các nhà phát triển web hoặc người kiểm tra chuyên nghiệp, nhưng nó cũng rất hữu ích cho người dùng Chrome tiêu chuẩn để biết cách sử dụng bộ DevTools . Nếu bạn gặp sự cố với trang web mà bạn không thể giải quyết, việc chuyển sang chế độ nhà phát triển Chrome có thể giúp bạn xem sự cố xảy ra với trang web hay với trình duyệt của bạn.

Cách truy cập menu công cụ dành cho nhà phát triển của Google Chrome^{(How To Access Google Chrome DevTools Menu)}

Có một số cách để bạn có thể truy cập menu Google Chrome DevTools , tùy thuộc vào công cụ bạn muốn sử dụng.

Phương pháp dễ nhất để thực hiện việc này là từ menu Google Chrome . Để thực hiện việc này, hãy nhấp vào biểu tượng menu ba chấm^{(three-dots menu icon)} ở trên cùng bên phải. Từ menu xuất hiện, nhấp vào More Tools > Developer Tools .

Thao tác này sẽ mở bộ công cụ DevTools trong menu mới ở phía bên phải của cửa sổ hoặc tab Chrome đang mở của bạn.^(Chrome)

Bạn cũng có thể thực hiện việc này bằng cách sử dụng phím tắt. Từ PC chạy Windows^(Windows) hoặc Linux^{(Linux PC)} , mở trình duyệt Chrome và nhấn phím F12 . Bạn cũng có thể nhấn tổ hợp Ctrl + Alt + J hoặc Ctrl + Alt + I trong cửa sổ hoặc tab Chrome đang mở.^(Chrome)

Trên macOS, nhấn F12 hoặc nhấn các phím Option + Command + J hoặc Option + Command + I để mở menu Chrome DevTools . Thao tác này sẽ mở bảng điều khiển Chrome , với các tùy chọn để chuyển sang các công cụ Chrome khác ở đầu menu DevTools .

Nếu muốn, bạn có thể xem mã nguồn của trang web (mở tab Phần tử của menu ^(Elements)DevTools trong quá trình này) trên bất kỳ trang web đang mở nào bằng cách nhấp chuột phải vào và nhấp vào tùy chọn Kiểm tra^{(Inspect )} .

Sử dụng Chrome DevTools^{(Using Chrome DevTools)}

Như chúng tôi đã đề cập sơ qua, bạn có thể sử dụng bộ Công cụ dành cho nhà phát triển của Chrome^{(Chrome DevTools)} để xem mã nguồn của trang web trong tab Phần tử . ^(Elements)Nó sẽ cho phép bạn phân tích mã đằng sau trang bạn đã tải, cũng như xem các thông báo lỗi (cho biết các vấn đề với cách trang web đã tải) trong bảng điều khiển Chrome bên dưới tab Bảng điều khiển .^(Console)

Bạn cũng có thể xem các nguồn khác nhau cho nội dung từ một trang web trong tab Nguồn . ^(Sources)Ví dụ: nếu một trang web đang sử dụng mạng phân phối nội dung (CDN)^{(using a content delivery network (CDN))} , thì phương tiện từ một trang web sẽ được liệt kê là một nguồn khác tại đây.

Chế độ nhà phát triển Chrome^(Chrome) cho phép bạn tải xuống nội dung đó trực tiếp hoặc thực hiện phân tích nội dung phức tạp hơn.

Nếu bạn muốn kiểm tra xem một trang web đang hoạt động như thế nào, bạn có thể theo dõi và ghi lại việc sử dụng mạng của mình trong tab Mạng . ^(Network)Điều này sẽ hiển thị tốc độ, kích thước và loại yêu cầu mạng được thực hiện giữa trình duyệt của bạn và trang web.

Ví dụ: khi một trang tải lần đầu tiên, trang web sẽ tự tải nội dung trang đó, nhưng nó cũng có thể yêu cầu dữ liệu từ cơ sở dữ liệu của bên thứ ba. Ví dụ: khi bạn đăng nhập, điều này có thể truy vấn cơ sở dữ liệu sẽ hiển thị dưới dạng yêu cầu mạng ở đây.

Bạn có thể phân tích thêm điều này trong tab Hiệu suất , nơi bạn có thể ghi lại việc sử dụng trình duyệt ^{(Performance )}Chrome của mình một cách chuyên sâu hơn, bao gồm cả việc ghi lại ảnh chụp màn hình ở các điểm khác nhau. Điều này sẽ ghi lại thời gian tải trang web của bạn để phân tích thêm.

Google Chrome nổi tiếng là khó sử dụng bộ nhớ PC của bạn^{(being hard on your PC memory)} , vì vậy bạn có thể kiểm tra việc sử dụng bộ nhớ JavaScript trên trang web của mình trong tab Bộ nhớ . ^(Memory)Bạn có thể sử dụng các cấu hình thử nghiệm Chrome khác nhau^{(Different Chrome)} tại đây, với thông tin thêm về thử nghiệm này tại trang tài liệu Chrome DevTools^{(Chrome DevTools documentation page)} .

Để có phân tích sâu hơn về nội dung trang web của bạn, cũng như bất kỳ bộ nhớ trình duyệt nào mà nó có thể đang sử dụng (ví dụ: để ghi dữ liệu), bạn có thể tìm kiếm thông qua tab Ứng dụng . ^{(Application)}Bạn có thể xem thông tin cookie của trang web tại đây trong phần Cookie^(Cookies) hoặc xóa bộ nhớ đang được sử dụng bằng cách nhấp vào tùy chọn Xóa bộ nhớ^{(Clear storage)} .

Nếu bạn lo lắng về bảo mật trang web của mình, bạn có thể kiểm tra xem nó hoạt động tốt như thế nào trong tab Bảo mật . ^{(Security )}Điều này sẽ cung cấp cho bạn tổng quan nhanh về phân tích bảo mật của Chrome cho một trang, bao gồm cả việc trang đó có chứng chỉ SSL chính xác và đáng tin cậy hay không .

Nếu bạn muốn tạo báo cáo về hiệu suất trang web của mình, bao gồm cả việc nó có đáp ứng các tiêu chuẩn người dùng thông thường hay không và nếu hiệu suất trang web có thể ảnh hưởng đến việc tối ưu hóa công cụ tìm kiếm, bạn có thể nhấp vào tab Lighthouse . Điều này cung cấp các cài đặt mà bạn có thể chọn hoặc bỏ chọn cho báo cáo của mình — nhấp vào Tạo báo cáo^{(Generate report)} để tạo báo cáo để xem.

Điều này hầu như không làm trầy xước bề mặt của tiềm năng mà chế độ nhà phát triển Chrome có thể mang lại cho các nhà phát triển. Nếu bạn muốn tìm hiểu thêm, tài liệu Công cụ dành cho nhà phát triển của Chrome^{(Chrome DevTools documentation)} sẽ giúp bạn về các công cụ và tính năng được cung cấp, bao gồm cả cách tạo các thử nghiệm người dùng của riêng bạn với nó. 

Thủ thuật Google Chrome nâng cao^{(Advanced Google Chrome Tricks)}

Hầu hết người dùng Chrome sẽ không bao giờ biết rằng bộ công cụ Google Chrome DevTools^{(Google Chrome DevTools)} tồn tại trong trình duyệt của họ, nhưng đối với người dùng thành thạo, nó vẫn là một cách đặc biệt hữu ích để kiểm tra và phân tích các trang web. Ngoài ra còn có các tiện ích mở rộng Chrome của bên thứ ba dành cho các nhà phát triển web^{(Chrome extensions for web developers)} để giúp kiểm tra thêm trang web của bạn.

Nếu bạn đang xây dựng một trang web cơ bản^{(building a basic website)} , việc chuyển sang chế độ nhà phát triển Chrome có thể giúp bạn phát hiện các lỗi mà trang web của bạn không hiển thị ngay lập tức. Bạn chỉ có thể thực hiện việc này nếu Chrome đang hoạt động bình thường, vì vậy nếu bạn đang gặp khó khăn với sự cố Chrome^{(struggling with Chrome crashes)} , trước tiên, bạn có thể cần phải đặt lại hoặc cài đặt lại trình duyệt của mình.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built perfectly. Like all products mаde by humans, codе errors are part of the process. That’s why it’s important to thoroughly test any new website you build to make sure that it’s as free of errors as possible to give your users the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Tự động điền của Google Chrome: Hướng dẫn đầy đủ

• 10 tiện ích mở rộng quyền riêng tư tốt nhất cho Chrome (2022)

• Sử dụng 4 plugin này của Chrome để mã hóa thư Gmail của bạn

• Cài đặt nội dung của Google Chrome: Hướng dẫn đầy đủ

• Dịch vụ cuộc gọi hội nghị tốt nhất là gì - Các ứng dụng tốt nhất được so sánh

• Các tiện ích tinh chỉnh CPU, Card màn hình và RAM tốt nhất

• 7 công cụ cắt tốt nhất cho Chromebook

• 5 Tiện ích Bảo mật Tốt nhất của Firefox cho An toàn Trực tuyến

• 9 cách ghi lại màn chơi trên PC của bạn

• Cách kiểm tra xem nhiệt độ CPU của bạn có quá cao không

• Tiện ích mở rộng bảo mật trực tuyến của Avast: Nó có đáng sử dụng không?

• Cách sử dụng trình quản lý gói Windows để cài đặt các chương trình Windows

• Trình phân tích cú pháp email của Zapier: 3 cách sáng tạo để sử dụng nó

• 5 lựa chọn thay thế Windows cho Linux sudo Command

• 4 công cụ tuyệt vời để tạo gói trình cài đặt Windows

• 5 công cụ quét IP tốt nhất cho Windows, Mac, iOS và Android

• 5 ứng dụng di động mà bạn chắc chắn muốn có trên thanh USB của mình

• Cách chặn các trang web bằng phần mềm kiểm soát miễn phí của phụ huynh

• 4 lựa chọn thay thế tốt nhất cho Google Chromecast

• Hai công cụ phiên âm để chuyển âm thanh thành văn bản