Những thủ thuật hay với Chrome DevTool dành cho phát triển web - Tailieu123.org

766

177

Định dạng

Báo cáo tài liệu vi phạm

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

Chrome DevTool

phát triển web

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

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...

Tổng hợp những add-on (tiện ích mở rộng) của Chrome dành cho chuyên vi...

Hệ thống những lý luận cơ bản về phát triển nguồn nhân lực (NNL). Đưa...

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...

Đề tài: tìm hiểu và đưa ra những con số thống kê cũng như mô hình phát...

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...

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ô...

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

Chrome DevTool

phát triển web

tài liệu mới trong mục này

Hướng dẫn chuyển ứng dụng từ bộ nhớ sang thẻ nhớ SD trên thiết bị Android

Top 10 tính năng còn thiếu từ Google Plus

Kích hoạt tính năng Guest Browsing trên Google Chrome

Tổng hợp các plugin WordPress cho trang web ảnh

Chuyển blog từ Tumblr sang Wordpress

tài liệu hot trong mục này

Tổng hợp câu hỏi trắc nghiệm kiến trúc máy tính kèm đáp án