Cách chỉnh sửa tạm thời một trang web bất kỳ
Inspect Element: Làm th nào đ ch nh s a t m th i m t trangế ể ỉ ử ạ ờ ộ
web b t kỳ?ấ
Kích chu t ph i vào m t trang web b t kỳ, click ch nộ ả ộ ấ ọ Inspect và b n s ạ ẽ
nhìn th y m i th bên trong c a trang web đó, bao g m: mã ngu n, hình ấ ọ ứ ủ ồ ồ
nh và CSS đ c thi t k , font ch và các bi u t ng mà trang s d ng vàả ượ ế ế ữ ể ượ ử ụ
mã Javascript nh đ ng, ...ả ộ
Trên trình duy t c a b n có m t công c n c c kỳ m nh m : Inspect ệ ủ ạ ộ ụ ẩ ự ạ ẽ
Element.
Kích chu t ph i vào m t trang web b t kỳ, click ch nộ ả ộ ấ ọ Inspect và b n s ạ ẽ
nhìn th y m i th bên trong c a trang web đó, bao g m: mã ngu n, hình ấ ọ ứ ủ ồ ồ
nh và CSS đ c thi t k , font ch và các bi u t ng mà trang s d ng vàả ượ ế ế ữ ể ượ ử ụ
mã Javascript nh đ ng, .... B n còn có th xem đ c m t bao nhiêu th i ả ộ ạ ể ượ ấ ờ
gian đ t i trang web, bao nhiêu băng thông đ t i và màu s c chính xác ể ả ể ả ắ
đ c s d ng trên text c a trang web đó.ượ ử ụ ủ
Ho c ngoài ra b n còn có th s d ng Inspect element đ ch nh s a trang ặ ạ ể ử ụ ể ỉ ử
web b t kỳ mà b n mu n.ấ ạ ố
Inspect element là m t cách hoàn h o đ tìm hi u cách đánh d u trang web,ộ ả ể ể ấ
tìm ra các l h ng và l i trên trang web c a b n, tìm hi u gi l p màu s c ỗ ổ ỗ ủ ạ ể ả ậ ắ
và font ch thay đ i s nh th nào. Đó là m t công c “siêu m nh” trên ữ ổ ẽ ư ế ộ ụ ạ
trình duy t mà b n ch a bao gi bi t đ n.ệ ạ ư ờ ế ế
Cùng tìm hi u cách s d ng Inspect Element đ h tr cho công vi c c a ể ử ụ ể ỗ ợ ệ ủ
b n, dù b n là m t nhà developer hay ch đ n gi n là tìm hi u đ có thêm ạ ạ ộ ỉ ơ ả ể ể
thông tin v Inspect element.ề
1. T i sao l i nên s d ng Inspect element?ạ ạ ử ụ
N u tò mò v mã code c a m t trang web nào đó, ch c h n b n s th c ế ề ủ ộ ắ ẳ ạ ẽ ắ
m c v cách s d ng Inspect element.ắ ề ử ụ
- Designer: B n mu n xem tr c m t trang web đ c thi t k s hi n th ạ ố ướ ộ ượ ế ế ẽ ể ị
nh th nào trên thi t b di đ ng?, hay m t th gì đó... B n có th thao tác ư ế ế ị ộ ộ ứ ạ ể
trong vòng vài giây v i Inspect Element.ớ
- Marketer: N u tò mò v keyword (t khóa) mà đ i th c nh tranh c a ế ề ừ ố ủ ạ ủ
b n s d ng trên tiêu đ c a trang ho c n u mu n ki m tra t c đ load ạ ử ụ ề ủ ặ ế ố ể ố ộ
trang c a Google? Inspect element có th hi n th t t c nh ng th này.ủ ể ể ị ấ ả ữ ứ
- Writer: N u đang đau đ u v vi c làm m tên và đ a ch emal trên nh ế ầ ề ệ ờ ị ỉ ả
ch p màn hình? V i Inspect element, b n có th thay đ i b t kỳ n i dung, ụ ớ ạ ể ổ ấ ộ
text trên trang web mà ch m t vài giây.ỉ ấ
- Support Agent: N u c n m t gi i pháp t t h n đ các nhà developer fix ế ầ ộ ả ố ơ ể
trang web c a h . Inspect element cho phép b n có th th c hi n m t ví dủ ọ ạ ể ự ệ ộ ụ
thay đ i đ hi n th nhanh chóng nh ng gì b n đang nói.ổ ể ể ị ữ ạ
Inspect element là m t công c h u ích cho b n, đó là m t ph n c a công ộ ụ ữ ạ ộ ầ ủ
c Developer Tools trên trình duy t c a b n. Công c này bao g m m t s ụ ệ ủ ạ ụ ồ ộ ố
tính năng: giao di n đi u khi n đ ch y mã code, trang View Source đ ệ ề ể ể ạ ể
xem Raw Code phía sau m t trang web, m t trang Soure (trang ngu n) v i ộ ộ ồ ớ
danh sách t t c các t p tin đ c t i trên m t trang web,...ấ ả ậ ượ ả ộ
D i đây là cách s d ng tab Element chính đ tinh ch nh m t trang web.ướ ử ụ ể ỉ ộ
2. B t đ u v i Inspect Elementắ ầ ớ
Có m t s cách đ truy c p Inspect Element trên Google Chrome. Ch c n ộ ố ể ậ ỉ ầ
m trang web mà b n mu n ch nh s a, sau đó th c hi n theo 1 trong s 3 ở ạ ố ỉ ử ự ệ ố
cách d i đây:ướ
- Kích chu t ph i vào b t kỳ v trí nào trên trang web c a b n, và phía d iộ ả ấ ị ủ ạ ướ
menu xu t hi n m t c a s popup, t i đây b n s nhìn th yấ ệ ộ ử ổ ạ ạ ẽ ấ Inspect,
nhi m v c a b n là click ch nệ ụ ủ ạ ọ Inspect.
- Click vào bi u t ng hình răng c a (ho c bi u t ng 3 dòng g ch ngang)ể ượ ư ặ ể ượ ạ
góc trên cùng bên ph i màn hình, click ch nở ả ọ More tools => Developer
tools.
Ho c cách khác là trênặ Menu File => Developer => Developer Tools.
- Nh n t h p phímấ ổ ợ Command + Option + I (đ i v i Mac) ho c ố ớ ặ
nh nấ phím F12 trên máy tính Windows đ m Inspect Element mà không ể ở
c n click b t kỳ thêm b c nào.ầ ấ ướ
Theo m c đ nh công c Developer Tools s m m t b ng góc d i c a ặ ị ụ ẽ ở ộ ả ở ướ ử
s trình duy t c a b n và hi n th tab Elements.ổ ệ ủ ạ ể ị
Click ch n bi u t ng 3 d u ch m th ng hàng trên b ng Inspect element ọ ể ượ ấ ấ ẳ ả
(g n bi u t ng d u X). Lúc này b n s nhìn th y tùy ch n đ di chuy n ầ ể ượ ấ ạ ẽ ấ ọ ể ể
b ng sang phía bên ph i c a s trình duy t ho c đ m m t b ng riêng ả ả ử ổ ệ ặ ể ở ộ ả
bi t.ệ
Trong ví d trên là m b ng Inspect element phía bên ph i c a s trình ụ ở ả ở ả ử ổ
duy t. B n có th m r ng ho c thu h p ho c m r ng b ng Developer ệ ạ ể ở ộ ặ ẹ ặ ở ộ ả
Tools b ng cách di chuy n chu t bên trái border.ằ ể ộ
Khi bi u t ng "<–>" xu t h n, kéo bi u t ng sang khung bên trái đ mể ượ ấ ệ ể ượ ể ỏ
r ng b ng ho c kéo sang ph i đ ộ ả ặ ả ể thu h p.ẹ
Trên c a s Inspect Element, có m t lo t các công c h u ích mà b n có ử ổ ộ ạ ụ ữ ạ
th s đ t o trang web. Trong ph n h ng d n này, Qu n tr m ng t p ể ử ể ạ ầ ướ ẫ ả ị ạ ậ
trung vào 3 tab là Elements, Emulation và tab Search.
- Tab Search:
Tab Search cho phép b n tìm ki m m t trang web có n i dung c th cho ạ ế ộ ộ ụ ể
m t ph n t HTML. Click vào bi u t ng 3 d u ch m, sau đó click ộ ầ ử ể ượ ấ ấ
ch nọ Search All Files đ hi n th các file. Và bây gi b n có th tìm ki m ể ể ị ờ ạ ể ế
các file quan tr ng trên trang web mà b n mu n.ọ ạ ố
- Tab Elements:
Inspect element là công c mà chúng ta s tìm hi u nhi u nh t trong h ngụ ẽ ể ề ấ ướ
d n này. Click vàoẫ tab Elements trên công c Developer tools đ tr l i ụ ể ở ạ
n u b n đang khám phá các v trí khác.ế ạ ị
Trên tab Explore b n có th nhìn th y t t c HTML, JavaScrit và CSS ạ ể ấ ấ ả
đ c tích h p trên trang web. Nó gi ng nh xem mã ngu n c a m t trang ượ ợ ố ư ồ ủ ộ
web, tuy nhiên có m t đi m khác đây là b n có th th c hi n b t kỳ thay ộ ể ở ạ ể ự ệ ấ
đ i c a mã này và xem các thay đ i trong th i gian th c trên trang web mà ổ ủ ổ ờ ự
b n đã m .ạ ở
B n có th thay đ i b t c đi u gì trên các b n sao nh font ch , ch p ạ ể ổ ấ ứ ề ả ư ữ ụ
nh màn hình ho c l u thay đ i c a b n (ch c n ả ặ ư ổ ủ ạ ỉ ầ
vào View => Developer => View Source và l u các trang nh là m t file ư ư ộ
HTML, ho c sao chép nh ng thay đ i mã đ trên trình s a văn b n. Sau khiặ ữ ổ ể ử ả
reload l i trang, t t c thay đ i c a b n s b bi n m t.ạ ấ ả ổ ủ ạ ẽ ị ế ấ
- Tab Emulation:
Đã bao gi b n mu n xem tr c m t trang web trên đi n tho i di đ ng c aờ ạ ố ươ ộ ệ ạ ộ ủ
mình mà không c n ph i lôi đi n tho i ra hay ch a? Tab Emulation cho ầ ả ệ ạ ư
phép b n xem m t trang web gi ng nh cách mà b n xem m t trang web ạ ộ ố ư ạ ộ
trên m t thi t b b t kỳộ ế ị ấ nào đó, v i các thi t l p trên các thi t b ph bi n ớ ế ậ ế ị ổ ế
ho c m t tùy ch n đ thi t l p đ phân gi i màn hình và t l màn hình ặ ộ ọ ể ế ậ ộ ả ỉ ệ
(aspect ratio). Th m chí b n còn có th thi tl p mô ph ng t c đ internet ậ ạ ể ế ậ ỏ ố ộ
đ xem cách load m t trang web nhanh chóng nh th nào.ể ộ ư ế
Tuy nhiên Emulation b n, do đó b n ph i kích ho t b ng cách m Inspect ị ẩ ạ ả ạ ằ ở
Element, nh nấ phím Esc sau đó ch nọ tab Emulate r i kích ho t nútồ ạ Enable
Emulation đ kích ho t.ể ạ
3. Tìm ki m b t kỳ m i th trên trang web v i Searchế ấ ọ ứ ớ
N u mu n tìm chính xác b t kỳ th gì đó trên trang web yêu thích c a b n, ế ố ấ ứ ủ ạ
Search là công c t t nh t dành cho b n. Ngoài vi c đ c toàn b mã ngu nụ ố ấ ạ ệ ọ ộ ồ
c a trang web, b n có th m xem Elements m c đ nh, nh n t h p phím ủ ạ ể ở ặ ị ấ ổ ợ
Ctrl + F ho cặ Command + F và tìm ki m thông qua mã ngu n. Tuy nhiên ế ồ
công c Search đ y đ cho phép b n tìm ki m thông qua các t p tin trên ụ ầ ủ ạ ế ậ
trang, giúp b n tìm ki m các văn b n bên trong các file CSS và JavaScript ạ ế ả
ho c xác đ nh bi u t ng hình nh mà b n c n cho m t bài vi t.ặ ị ể ượ ả ạ ầ ộ ế
Đ b t đ u, mể ắ ầ ở Zapier.com trên trình duy t Chrome c a b n n u ch a có ệ ủ ạ ế ư
s n, sau đó m Inspect Element, click vào bi u t ng 3 d u ch m th ng ẵ ở ể ượ ấ ấ ẳ
hàng góc trên cùng bên ph i c a s b ng Developer Tools (g n bi u ở ả ử ổ ả ầ ể
t ng d u X), sau đó ch nượ ấ ọ Search All Files. Tab Search s hi n th n a ẽ ể ị ở ử
d i b ng Developer Tools.ướ ả
T i khung Seach, b n có th nh p b t c th gì mà b n mu n tìm trên ạ ạ ể ậ ấ ứ ứ ạ ố
trang web và thông tin b n c n s hi n th trên b ng này.ạ ầ ẽ ể ị ả
Nh pậ meta name vào khung Search r i nh n Enter, ngay l p t c b n s ồ ấ ậ ứ ạ ẽ
nhìn th y t t cấ ấ ả meta name xu t hi n trên đo n mã code trên trang này. ấ ệ ạ
Bây gi b n có th nhìn th y n u siêu d li u (metadata) c a trang là chínhờ ạ ể ấ ế ữ ệ ủ
xác, t khoá SEO s là đích và xem nó có đ c c u hình đ Google Index ừ ẽ ượ ấ ể
tìm ki m hay không. Đây là m t cách đ n gi n đ xem đ i th c nh tranh ế ộ ơ ả ể ố ủ ạ
c a b n đang nh m m c tiêu đ n là gì và đ ch c ch n r ng b n không bủ ạ ắ ụ ế ể ắ ắ ằ ạ ỏ
l b t c th gì trên trang.ỡ ấ ứ ứ
có thể bạn quan tâm
Luận án tiến sĩ quản lý hành chính công: Qúa trình cải cách ngân sách...
27
1.089
2.209
Thạc sĩ cao học
27
(New)
SỰ LỰA CHỌN TỶ GIÁ HỐI ĐOÁI CỦA VIỆT NAM THỰC TRẠNG VỀ TỶ GIÁ HỐI ĐOÁI...
65
959
297
Kinh tế - Thương mại
65
(New)
SỰ LỰA CHỌN TỶ GIÁ HỐI ĐOÁI CỦA VIỆT NAM THỰC TRẠNG VỀ TỶ GIÁ HỐI ĐOÁI...
65
1.030
372
Kinh tế - Thương mại
65
(New)
THỰC TRẠNG CẢI CÁCH HÀNH CHÍNH Ở HUYỆN YÊN ĐỊNH, TỈNH THANH HÓA
24
595
422
Kinh tế quản lý
24
(New)
THỜI TRANG : SỬ DỤNG VÀ BẢO QUẢN TRANG PHỤC (Tiết 1)
2
772
307
Giáo án, bài giảng lớp 6
2
(New)
THỜI TRANG : SỬ DỤNG VÀ BẢO QUẢN TRANG PHỤC (Tiết 2)
2
771
314
Giáo án, bài giảng lớp 6
2
(New)
Phân tích thực trạng giải pháp tài chính và tình hình kinh doanh các s...
146
950
241
Kinh tế quản lý
146
(New)
THỜI TRANG : LỰA CHỌN TRANG PHỤC
2
767
291
Giáo án, bài giảng lớp 6
2
(New)
thông tin tài liệu
Kích chuột phải vào một trang web bất kỳ, click chọn Inspect và bạn sẽ nhìn thấy mọi thứ bên trong của trang web đó, bao gồm: mã nguồn, hình ảnh và CSS được thiết kế, font chữ và các biểu tượng mà trang sử dụng và mã Javascript ảnh động, ...
Mở rộng để xem thêm
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
