Công cụ hữu ích của Chrome mà ai cũng phải biết – Phần 1

Chào bạn đọc, vậy là lâu rồi mình không ra bài mới nhỉ. Xin lỗi mọi người vì dạo này mình hơi bận rộn với một đống bài tập lớn của trường và phải làm mấy cái project để kiếm cơm.Đọc tiêu đề bài viết đã biết là hay rồi, nào chúng ta cùng bắt đầu thôi nào. Do series này hơi dài nên mình sẽ chia thành hai phần.

Cùng theo dõi nội dung dưới đây nhé 🙂

1. Kéo và thả trong Element Panel

Ở bên trong của Element Panel, các bạn có thể kéo và thả bất kỳ các thẻ HTML nào và thay đổi vị trí của nó và sẽ thấy sự thay đổi của trang web.

sang
kéo và thả trong Element Panel

2. Tham chiếu đến phần tử được chọn hiện tại thông qua Console

Chọn một node trong Element Panel, và nhấn $0 trong màn console để tham chiếu đến nó.

Nếu bạn sử dụng jQuery, bạn hãy nhấn $($0) để truy cập vào jQuery API trên phần tử này.

sang1
tham chiếu đến giá trị được chọn hiện tại thông qua Console

3. Sử dụng giá trị của thao tác cuối cùng trong Console

Bạn có thể sử dụng $_ để tham chiếu đến giá trị cuối cùng của thao tác vừa thực hiện trong màn hình Console.

sang2
sử dụng giá trị của thao tác cuối cùng trong Console

4. Thêm CSS và chỉnh sửa thuộc tính cho từng phần tử HTML

Ở bên trong Element Panel có hai phím cực kì hữu ích 🙂

+ Đầu tiên là nó sẽ cho phép bạn thêm bất kỳ thuộc tính nào vào phần tử HTML mà bạn chọn.

sang3
thêm CSS rules 🙂

+ Thứ hai là nó sẽ giúp cho bạn xem được những thuộc tính nào đã được dùng trên phần tử mà bạn chọn.

sang4

5. Lưu được file CSS mà bạn đã edit

Hãy click vào tên file CSS mà bạn đã edit trước đó. Hãy kiểm tra nó và bạn có thể lưu lại file CSS mà bạn đã chỉnh sửa lên nó. Khá hay đúng không nào 🙂

sang5
lưu lại file CSS đã được edit trước đó

6. Có thể chụp hình lại phần tử bất kỳ nào đó

Bạn hãy chọn 1 phần tử vầ nhấn cmd-shift-p (hoặc là ctrl-shift-p trên Windows) để mở Command Menu và lựa chọn Capture node screenshot.

sang6
chụp hình phần tử bất kỳ 🙂

Series này bao gồm 12 công cụ hữu ích của Chrome, Phần 1 này gồm 6 tools. Phần còn lại các bạn nhớ đón xem ở Phần 2 nhé 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s