Home
Công nghệ thông tin
Tài liệu CNTT khác
Những thủ thuật hay với Chrome DevTool dành cho phát triển web
Những thủ thuật hay với Chrome DevTool dành cho phát triển web
M t s th thu t v i Chrome DevToolộ ố ủ ậ ớ
V i Developer, vi c s d ng các công c đ tăng t c quá trình code là ớ ệ ử ụ ụ ể ố
đi u t t y u, m i ng i đ u l a ch n cho riêng mình m t công c nào đó ề ấ ế ỗ ườ ề ự ọ ộ ụ
v i v n đ c a riêng mình. V i Web Developer thì công c n m trên chính ớ ấ ề ủ ớ ụ ằ
trình duy t mà h s d ng. D i đây là m t s th thu t v i DevTool c a ệ ọ ử ụ ướ ộ ố ủ ậ ớ ủ
GoogleChrome có th giúp b n ti t ki m đ c th i gian n u s d ng h p ể ạ ế ệ ượ ờ ế ử ụ ợ
lý.
1.Drag and Drop các Element
T i b ng đi u khi n Elements, chúng ta có th kéo th b t kỳ th HTML ạ ả ề ể ể ả ấ ẻ
nào và thay đ i v trí c a chúng trên trang.ổ ị ủ
2. Liên k t Element đang ch n đ n Consoleế ọ ế
Tr c tiên b n ch n ph n t c n liên k t t i b ng đi u khi n Element, sauướ ạ ọ ầ ử ầ ế ạ ả ề ể
đó d i c a s Console b n nh pướ ử ố ạ ậ let element = $0, đây là tính năng c a ủ
Chrome (b n đ ng nh m c a Jquery), th là b n có th dùng ạ ừ ầ ủ ế ạ ể
bi nế element đ đi u khi n ph n t này b ng JavaScript r i. Còn n u ể ề ể ầ ử ằ ồ ế
trang c a b n dùng Jquery thì tham chi u th nàyủ ạ ế ế let jqueryElement = $($0)
3 Copy vào ClipBoard
B n có m t bi n có giá tr và mu n copy vào ClipBoard đ paste b t kỳ ạ ộ ế ị ố ể ở ấ
đâu, hay k cể ả object, element… Hãy thử let test = 'Text Copy';
copy(test) và gi b nờ ạ ctrl + v b t kì đâu b n mu n xem th nào, t ng tở ấ ạ ố ế ươ ự
b n có th l y Element nh cách trên vào copy nó vào ClipBoard đ s ạ ể ấ ư ở ể ử
d ng.ụ
4. S d ng giá tr cu i cùng c a Consoleử ụ ị ố ủ
Đ n gi n là b n dùngơ ả ạ $_ đ s d ng trong các bi u th c mà b n c n giá ể ử ụ ế ứ ạ ầ
tr c a ph n tính toán ngay trên.ị ủ ầ ở
5. L u nh ng s a đ i CSS vào file.ư ữ ử ổ
Khi dùng DevTool thì ta có th thay đ i CSS tr c ti p trên trình duy t. Khi ể ổ ự ế ệ
b n thay đ i r t nhi u CSS, b n có mu n copy t ng nh ng thay đ i đó vàoạ ổ ấ ề ạ ố ừ ữ ổ
file CSS ko? V i mình thì có gi i pháp mình hay làm là mình c thay đ i ớ ả ứ ổ
CSS trên trình duy t, sau đó mình s l u file này và ghi đè vào file g c. Đ ệ ẽ ư ố ể
là đi u này thì sau khi thay đ i CSS, b n làm theo hu ng d n d i nh này.ề ổ ạ ớ ẫ ướ ả
6. Ch p l i m t Elementụ ạ ộ
Thông th ng ta s dùng thêm các công c bên ngoài đ ch p l i c màn ườ ẽ ụ ể ụ ạ ả
hình ho c nh ng khu v c mà ta c n, tuy nhiên vi c căn ch nh khu v c có ặ ữ ự ầ ệ ỉ ự
th không chính xác kích th c. DevTool h tr ta c vi c ch p l i màn ể ướ ỗ ợ ả ệ ụ ạ
hình và đ c bi t là ch p theo Element mà ta mu n ch p. Đ làm đi u này ặ ệ ụ ố ụ ể ề
thì t i DevTool, b n ch n Element c n ch p l i và nh nạ ạ ọ ầ ụ ạ ấ ctr+shift+p (v i ớ
Mac cmd-shift-p) và nh pậ Capture node screenshot.
7. Tìm m t Element s d ng CSS selectorsộ ử ụ
T i DevTool b n nh nạ ạ ấ ctrl + f và box tìm ki m Element đ c b t lên. B n ế ượ ậ ạ
nh p b t kỳ kí t nào gi ng trong source code, ho c có th truy v n theo ậ ấ ự ố ặ ể ấ
CSS selector
có thể bạn quan tâm
Những điều cần biết về chế độ Ẩn danh của Google Chrome, Coc Coc
4
1.038
271
An ninh, bảo mật
4
(New)
Phân tích thực trạng, những thuận lợi, thành công cũng như những khó k...
95
1.009
2.127
Thạc sĩ cao học
95
(New)
Tổng hợp những add-on (tiện ích mở rộng) của Chrome dành cho chuyên vi...
28
723
331
Tài liệu CNTT khác
28
(New)
Hệ thống những lý luận cơ bản về phát triển nguồn nhân lực (NNL). Đưa...
13
891
384
Thạc sĩ cao học
13
(New)
Luận văn tiến sĩ: Bản chất của hoạt động M&A, những nhận định về tiềm...
125
940
657
Thạc sĩ cao học
125
(New)
Đề tài: tìm hiểu và đưa ra những con số thống kê cũng như mô hình phát...
46
1.108
421
Kinh tế quản lý
46
(New)
Nghiên cứu cơ sở lí luận, những lợi thế và thách thức, xu hướng phát t...
34
788
335
Kinh tế - Thương mại
34
(New)
Giải pháp chuyển đổi cơ cấu cây trồng, vật nuôi, phát triển kinh tế nô...
67
1.003
338
Kinh tế - Thương mại
67
(New)
thông tin tài liệu
Với Developer, việc sử dụng các công cụ để tăng tốc quá trình code là điều tất yếu, mỗi người đều lựa chọn cho riêng mình một công cụ nào đó với vấn đề của riêng mình. Với Web Developer thì công cụ nằm trên chính trình duyệt mà họ sử dụng. Dưới đây là một số thủ thuật với DevTool của GoogleChrome có thể giúp bạn tiết kiệm được thời gian nếu sử dụng hợp lý.
Mở rộng để xem thêm
từ khóa liên quan
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!
×
