Google Chrome là một trong những trình duyệt web phổ biến để phát triển web, do các tính năng nâng cao của nó. Công cụ dành cho nhà phát triển Chrome^{(Chrome Developer Tools)} 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 Chrome Dev Tools , 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ó rất nhiều thủ thuật ẩn và chưa được biết đế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ụ dành cho nhà phát triển trong Chrome , hãy 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ở bất kỳ tệp nào

Khi chúng tôi phát triển web, chúng tôi xử lý nhiều tệp HTML^(HTML) , CSS , JS và các tệp khác. Khi chúng tôi muốn gỡ lỗi bất kỳ điều gì, chúng tôi mở 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ể để làm cho công việc của bạn dễ dàng hơn. Chỉ cần^(Just) 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 các tệp.

2. Tìm kiếm trong tệp nguồn

Trong thủ thuật trước, chúng ta đã 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 kiếm một chuỗi trong tệp. Nó cũng hỗ trợ các biểu thức chính quy.

3. Đi đến một dòng cụ thể

Khi bạn đã mở bất kỳ tệp nguồn nào và muốn di chuyển đến một dòng cụ thể, hãy nhấn Ctrl + G và cung cấp số dòng và nhấn enter.

4. Chọn Phần tử DOM trong tab Bảng điều khiển^(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 ^(Returns)CSS phù hợp .
• $$() – Nó trả về mảng các phần tử phù hợ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 xem bài đăng này.^{(this post.)}

5. Sử dụng nhiều dấu mũ

Đôi khi, bạn muốn đặt nhiều dấu mũ ở các vị trí khác nhau và bạn có thể thực hiện điều đó dễ dàng trong công cụ Chrome Dev bằng cách giữ phím Ctrl^{(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 nó được đặt ở những nơi khác nhau đã chọn.

6. Bảo quản Nhật ký

Lưu giữ nhật ký giúp bạn duy trì^(Preserve) nhật ký ngay cả khi trang được tải. Đánh dấu vào tùy chọn bên cạnh Bảo tồn nhật ký^{(Preserve log )} trong nhật ký Bảng điều khiển^(Console) và nhật ký được giữ nguyên. Điều này hiển thị nhật ký trước khi trang được tải xuống và hữu ích để điều tra các lỗi.

7. Sử dụng trình làm đẹp mã tích hợp sẵn

Chrome Dev Tools có trình làm đẹp mã tích hợp có tên là chữ in đẹp “{}”^{(pretty print “{}”)} . 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^(Click) vào nút in đẹp được hiển thị ở phía dưới bên trái của tệp nguồn đã mở, để hiển thị tệp nguồn ở định dạng con người có thể đọc được.

8. Trang web của bạn có thân thiện với thiết bị di động không? Kiểm tra nó ở đây

Chrome Dev Tools 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 giao diện trang web của mình trên các thiết bị khác nhau. Đi tới công cụ Chrome Dev và trong tab Mô phỏng , bạn có thể gửi các thiết bị khác nhau. ^{(Emulation )}Chọn thiết bị bạn muốn và kiểm tra giao diện trang web của bạn trên thiết bị đó.

Để biết thêm thông tin, hãy xem video sau.

9. Mô phỏng cảm biến và vị trí địa lý^{(Geographical Location)}

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 chuyển đến Emulation -> Sensors.

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 của 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. Sau đó, bạn có thể chỉnh sửa từ đó trong tất cả các lần xuất hiện của nó trong một lần chụp.

11. Định dạng màu thay đổi

Chỉ cần sử dụng Shift + Click vào bản xem trước màu để thay đổi các thay đổi giữa định dạng rgba, thập lục phân và hsl.

12. Thêm^(Add) các 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 tệp nguồn và thực hiện một số thay đổi trong CSS , JavaScript và các tệp khác trong công cụ Chrome Dev . Để thêm những thay đổi này vào tệp cục bộ, thì không cần sao chép-dán các thay đổi từ không gian làm việc sang tệp trên đĩa. Công cụ Chrome Dev^{(Chrome Dev)} cho phép bạn khớ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, hãy nhấp chuột phải vào tệp nguồn ở phía bên trái trên tab Nguồn và chọn ^{(Sources )}Thêm Thư mục vào không gian làm việc.^{(Add Folder to workspace.)}

Hi vọng điêu nay co ich.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web browsers for web development, due to its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Google Chrome Tips and Tricks tốt nhất cho người dùng Windows PC

• 3 mẹo và thủ thuật hữu ích để sử dụng ghi chú dính

• Cách tải xuống Font từ Website bằng Developer Tools

• Restart Chrome, Edge or Firefox mà không làm mất các tab trong Windows 11/10

• Mẹo về việc sử dụng Inspect Element của Google Chrome browser

• Kích hoạt Flash cho Specific Websites trong Chrome

• Làm thế nào để ghim một trang web vào thanh tác vụ hoặc Start Menu trong Windows 10

• Làm thế nào để in một bài báo không có quảng cáo trong tất cả các trình duyệt chính

• Làm thế nào để Fix Twitch Error 2000 trong Google Chrome

• Cách mở lại Browser Tab đã đóng trong Chrome, Safari, Edge and Firefox

• Cách tạo Chrome default browser trong Windows 10 (Firefox & Opera)

• Cách sửa mã lỗi Netflix M7111-1101

• Cách khắc phục 403 Forbidden Error trên Google Chrome

• Trong trường hợp được cookie lưu trữ trong Windows 10 cho tất cả các trình duyệt chính?

• Cách thay đổi Your Name trên Google Meet

• Làm thế nào để tắt Chrome thông báo: Tất cả các bạn cần biết

• Làm thế nào để ngăn chặn Chrome từ hỏi để lưu mật khẩu

• Làm thế nào để gửi một văn bản từ máy tính với Android Tin nhắn

• Go incognito Với shortcut key trong Chrome, Edge, Firefox và Opera

• Khắc phục tính năng Tự động phát của YouTube không hoạt động