Mẹo nhỏ khi sử dụng Chrome Dev Tools

Chrome Dev Tools là một bộ công cụ không thể thiếu cho Web Developer khi phát triển web trên Google Chrome. Nó cho phép ta có thể kiểm tra cấu trúc HTML của web, debug javascript, … Nhưng bên cạnh đó Chrome Dev Tools còn có rất nhiều chức năng mà có thể bạn chưa biết

1. Chrome Dev Tools dạng dọc

Bình thường khi chúng ta mở Chrome Dev Tools (nhấn F12 hoặc Inspect Element) thì nó sẽ nằm ở bên dưới của Google Chrome.  Nhưng nó còn có thể chuyển sang dạng dọc như hình dưới đây:

Chrome Dev Tools - Vertical

Khi ở dạng dọc, Chrome Dev Tools rất thích hợp để ta phát triển các web responsive. Ta có thể kéo độ rộng của nó to hoặc nhỏ để phù hợp với độ phần giải của từng thiết bị desktop, mobile. Khác...


Debug javascript với Chrome Dev Tools

Bạn đã bao giờ phải đau đầu khi đoạn JavaScript của mình không chạy không? Và sau đó lại phải sử dụng hàm alert() để xem code đó có chạy không. Rất mất công và khó thành công! Đặc biệt là khi ứng dụng web ngày càng yêu cầu xử lí phức tạp hơn nên JavaScript được viết rất nhiều vì thế việc debug rất cần thiết. Đừng lo lắng! Chrome Dev Tools đã giúp chúng ta rất nhiều  Chúng ta cùng bắt đầu tìm hiểu về debug JavaScript nhé.

Bắt đầu debug

Như ta đã biết, lỗi trong code bao gồm:

  • Lỗi cú pháp: Code không thể chạy được và thông báo ra lỗi.
  • Lỗi ngữ nghĩa: Code chạy được nhưng không ra kết quả mong muốn.

Lỗi cú pháp

Lỗi của pháp sẽ được hiển thị trên Console của Chrome Dev Tools.

Loi cu phap

 Khác...

CSS

Bộ chọn CSS (selectors)

Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css.

Bộ chọnVí dụMô tả
* * Chọn tất cả các thành phần html.
tag p Chọn tất cả các thành phần cùng loại.
tag01 tag02 div p Chọn tất cả thành phần <tag02> bên trong thành phần <tag01>.
tag01,tag02 div,p Chọn tất cả thành phần <tag01> và <tag02>.
tag01+tag02 div+p Chọn tất cả thành phần <tag02> được đặt kế và sau thành phần <tag01>.
tag01>tag02 div>p Chọn tất cả thành phần <tag02> có thành phần cha là <tag01>.
.class .className Chọn tất cả các thành phần có cùng tên class.
#id #idName Chọn tất cả các thành phần có cùng tên id.
:active a:active Chọn các liên kết được kích hoạt.
:after p:after Thêm nội dung ngay phía sau thành phần.
:before p:before Thêm nội dung ngay phía trước thành phần.
:first-child p:first-child Chọn thành phần đầu tiên của thành phần cha chứa nó.
:first-letter p:first-letter Chọn ký tự đầu tiên của một thành phần.
:first-line p:first-line Chọn dòng đầu tiên của một thành phần.
:focus input:focus Thành phần sẽ focus khi được chọn.
:hover a:hover Chọn các liên kết được hover (di chuyển chuột lên thành phần).
:lang(mã ngôn ngữ) p:lang(vi) Chọn thành phần với thuộc tính ngôn ngữ có giá trị bắt đầu với "mã ngôn ngữ".
:link a:link Định dạng cho tất cả liên kết khi chưa được click.
:visited a:visited Định dạng cho các thành phần đã được click.
[Thuộc tính] [target] Chọn tất cả các thành phần có cùng thuộc tính (attribute).
[Thuộc tính|=ngôn ngữ] [lang|=vi] Được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ".
[Thuộc tính~=giá trị] [title~=myWeb] Chọn tất cả các thành phần với thuộc tính chứa một giá trị.
[Thuộc tính=giá trị] [target=_blank] Chọn tất cả các thành phần với thuộc tính bằng giá trị.

 

Thuộc tính CSS

Thuộc tínhVí dụMô tả
background background: #ff0000; Định dạng nền (background) cho thành phần.
border border: 1px solid #ff0000; Định dạng đường viền cho thành phần.
border-collapse border-collapse: collapse; Thuộc tính border-collapse xác định đường viền củatable có tách biệt ra hay không.
border-spacing border-spacing: 10px; Xác định khoảng cách giữa các đường viền của các cột lân cận.
bottom bottom: 10px; Xác định vị trí dưới cùng của thành phần được định vị trí.
caption-side caption-side: bottom; Xác định vị trí một chú thích của table.
clear clear: both; Xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép.
clip clip: rect(0,0,50px,10px); Xác định đoạn cho thành phần khi sử dụng thuộc tính position có giá trị "absolute".
color color: #ff0000; Xác định màu sắc cho text.
content content: "." Sử dụng kèm với bộ chọn ":before", ":after" để chèn nội dung được tạo.
counter-increment counter-increment: section; Gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số)
counter-reset counter-reset: subsection; Tạo hoặc reset một hoặc nhiều counter.
cursor cursor: pointer; Xác định kiểu con trỏ chuột được hiển thị.
direction direction: ltr; Xác định hướng cho văn bản.
display display: inline; Xác định loại hiển thị của thành phần.
empty-cells empty-cells: hide; Xác định có hay không có đường viền và nền trong một cột rỗng của table
float float: left; Xác định có hay không một thành phần được float.
font font: 12px arial,sans-serif; Thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ...
height height: 50px; Thiết lập chiều cao của thành phần.
left left: 10px; Xác định vị trí bên trái của thành phần định vị trí (như position)
letter-spacing letter-spacing: 2px; Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.
line-height line-height: 1.5; Thiết lập chiều cao giữa các dòng.
list-style list-style: decimal; Thiết lập tất cả thuộc tính cho một danh sách trong một khai báo.
margin margin: 15px; Thiết lập các thuộc tính margin trong một khai báo.
max-height max-height: 200px; Thiết lập chiều cao tối đa của thành phần.
max-width max-width: 900px; Thiết lập chiều rộng tối đa của thành phần.
min-height min-height: 100px; Thiết lập chiều cao tối thiểu của thành phần.
min-width min-width: 600px; Thiết lập chiều rộng tối thiểu của thành phần.
outline outline: dotted; Định dạng các đường viền bao ngoài
overflow overflow: scroll; Xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung.
padding padding: 15px; Thiết lập các thuộc tính padding trong một khai báo.
page-break-after page-break-after: alway; Xác định các phân chia văn bản ngay sau thành phần.
page-break-before page-break-before: alway; Xác định các phân chia văn bản ngay trước thành phần.
page-break-inside page-break-inside: alway; Xác định các phân chia văn bản ngay bên trong thành phần.
position position: absolute; Xác định loại của phương pháp định vị trí cho thành phần.
quotes "‘" "’" Thiết lập các loại dấu ngoặc bao ngoài khi nhúng một trích dẫn.
right right: 10px; Xác định vị trí bên phải của thành phần định vị trí (như position)
table-layout table-layout: fixed; Thiết lập các thuật toán layout được sử dụng cho table.
text-align text-align: center; Sắp xếp các nội dung theo chiều ngang.
text-decoration text-decoration: underline; Xác định các trang trí thêm cho text.
text-indent text-indent: 10px; Ghi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản.
text-transform text-transform: uppercase; Thiết lập các ký tự viết hoa cho văn bản.
top top: 10px; Xác định vị trí bên trên của thành phần định vị trí (như position)
vertical-align vertical-align: middle; Sắp xếp các nội dung theo chiều dọc.
visibility visibility: visible; Xác định thành phần có được nhìn thấy hay không.
white-space white-space: nowrap; Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.
width width: 800px; Thiết lập chiều rộng của thành Thành phần
word-spacing word-spacing: 5px; Tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.
z-index z-index: 100; Thiết lập thứ tự xếp chồng nhau của một thành phần vị trí.

CSS3

Bộ chọn CSS (selectors)

Ngoài những bộ chọn (selectors) của CSS1 và CSS2, ở CSS3 còn có thêm những bộ chọn sau:

Bộ chọnVí dụMô tả
tag01~tag02 ul~p Chọn tất cả thành phần 02 khi có thành phần 01 ở trước.
[attribute^=value] img[src^="bnr_"] Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng "value".
[attribute$=value] img[src$=".gif"] Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng "value".
[attribute*=value] img[src*=""] Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng "value".
:first-of-type p:first-of-type Chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha.
:last-of-type p:last-of-type Chọn thành phần con cuối cùng hoặc duy nhất trong các thành phần cha.
:only-of-type p:only-of-type Chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó.
Trong thành phần cha có thể chứa nhiều thành phần con, tuy nhiên thành phần con được chọn phải là duy nhất, không được có từ 2 trở lên.
:only-child p:only-child Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:nth-child(n) p:nth-child(3) Chọn thành phần thứ "n" trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:nth-last-child(n) p:nth-last-child(3) Chọn thành phần thứ "n" tính từ thành phần cuối trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:nth-of-type(n) p:nth-of-type(3) Chọn thành phần thứ "n".
:nth-last-of-type(n) p:nth-last-of-type(3) Chọn thành phần thứ "n" từ thành phần cuối trong thành phần cha.
:last-child p:last-child Chọn thành phần cuối cùng trong thành phần cha.
Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
:root :root Chọn thành phần gốc của văn bản.
:empty p:empty Chọn thành phần không chứa thành phần khác.
:target #event:target Sử dụng trong liên kết anchor name (link neo).
:enabled input:enabled Chọn thành phần được kích hoạt (enabled), thường sử dụng cho các thành phần của form.
:disabled input:disabled Chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.
:checked input:checked Chọn thành phần được check (checked), thường sử dụng cho các thành phần của form.
:not(bộ chọn) :not(p) Chọn tất cả ngoại trừ bộ chọn trong ngoặc.
::selection ::selection Chọn phần tử được người dùng chọn.

 

Thuộc tính CSS



Ngoài những thuộc tính của CSS1 và CSS2, ở CSS3 còn có thêm những thuộc tính sau:

Thuộc tínhMô tả
animation Xác định một chuyển động của một thành phần.
appearance Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.
backface-visibility Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.
background-clip Xác định vùng backgroud được cắt bớt theo vùng được giới hạn.
background-origin Xác định giá trị tương đối của background giới hạn theo vùng giới hạn.
background-size Xác định lại chiều rộng và chiều cao cho background.
background gradient Tạo màu sắc cho background theo biên độ giảm dần.
Nhiều background Sử dụng để khai báo nhiều dạng background khác nhau trong cùng một tag.
border-image Dùng để định dạng các dạng border bằng hình ảnh.
border-radius Dùng để định dạng các dạng bo góc của border.
box-align Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng.
box-direction Xác định hướng cho thành phần.
box-flex Xác định sự ưu tiên linh hoạt theo các thành phần khác.
box-ordinal-group Cho biết thứ tự ưu tiên của các thành phần.
box-orient Xác định thành phần dọc theo phương hướng khối hoặc theo trục.
box-pack Định vị trí của thành phần theo mép rìa của thành phần.
box-sizing Xác định lại chiều rộng và chiều cao của thành phần.
box-shadow Định dạng bóng cho thành phần.
column Dùng để chia nội dung thành phần thành nhiều cột khác nhau.
@font-face Định dạng các dạng font chữ khác nhau theo các dạng font riêng.
font-size-adjust Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân.
@keyframes Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation.
nav Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng cách di chuyển các phím mũi tên.
opacity Hiển thị cấp độ trong suốt cho thành phần.
perspective Cho ta thấy được chiều sâu của thành phần trong khai báo 3D.
perspective-origin Định nghĩa trục quay cho thành phần có sử dụng perspective.
resize Định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước.
text-justify Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần.
text-overflow Xác định vùng text được cắt bớt.
text-shadow Xác định bóng đỗ cho text.
transform Xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ...
transform-origin Xác định trục cho một chuyển đổi 2 chiều, 3 chiều.
transform-style Các thành phần bên trong sẽ giữ vị trí 3D của nó.
transition Xác định một quá trình chuyển đổi khi có một hành động.
word-break Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.
word-wrap Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.
THUỘC TÍNH CHƯA ĐƯỢC HỖ TRỢ BỞI TRÌNH DUYỆT
grid-columns Xác định chiều rộng cho các cột trong định dạng lưới.
grid-rows Xác định chiều rộng cho các hàng trong dạng lưới.
hanging-punctuation Xác định một dấu chấm câu có thể đặt ở đầu hoặc ở cuối của một dòng văn bản.
icon  
punctuation-trim Xác định một ký tự dấu chấm câu nên được cắt nếu nó xuất hiện ở đầu hoặc cuối của một dòng, hoặc tiếp giáp với một ký tự dấu chấm câu đầy đủ chiều rộng khác.
rotation Xoay một thành phần theo một điểm.
target Xác định cách thức mở ra một liên kết như: tab, popup, ...
text-outline Xác định dạng vùng biên cho text.
text-wrap Định dạng dòng text có bị ngắt đoạn hay không.

Phân biệt Callback và Postback

Đối với postback một phần (partial postback hay async postback), thì hiện tượng co giật không xảy ra do có một đối tượng JavaScript (ScriptManager) đứng đằng sau để vẽ lại một phần màn hình theo yêu cầu. Tuy nhiên khi trang HTML quá phức tạp với số lượng lớn các thẻ HTML được sinh ra, thì Partial Postback vẫn gây ra hiện tượng co giật nhưng với mức độ nhỏ hơn so với Full-Postback.

 Trong khi đó Callback chỉ là một cách triệu gọi (thí dụ gọi hàm) đơn thuần lên server để lấy dữ liệu và đổ vào một thẻ nào đó được đặt trước (Place holder) chứ không refresh lại toàn bộ trang, và do đó cũng không gây ra hiện tượng co giật. Như vậy sẽ không thể dùng Callback để vẽ lại bất cứ một vùng nào của trang HTML. Trên server (code-behind), việc cố gắng update giao diện các Control thì sẽ trở nên vô tác dụng, điều này cũng giống như khi cố gắng update một cái gì đó trên UI tại thời điểm “unload” xảy ra (xem ASP.NET Page LifeCycle) nhưng lúc đó việc Rendering đã hoàn tất và không thực thi bất cứ một yêu cầu cập nhật UI nào. Một nhược điểm của ASP.NET là việc cố gắng cập nhật UI tại thời điểm Unload hoặc Callback đểu không gây ra Exception khiến cho những người mới bắt đầu học ASP.NET mất rất nhiều thời gian để tìm hiểu vì sao việc cập nhật UI lại thất bại!

 Chúng ta có thể so sánh vòng đời của Postback và Callback như ở dưới đây. Có thể thấy là chúng giống nhau ở hầu hết các giai đoạn, trừ các giai đoạn Rendering vì Callback không tham gia thực hiện việc update UI. Một lưu ý quan trọng là khi Callback xảy ra, giá trị của ViewState không bao giờ thay đổi, tức là khi cố gắng thay đổi giá trị của ViewState trên server khi Callback xảy ra, thì giá trị ViewState vẫn giữ nguyên.

Có thể cập nhật một vùng của trang Web với Callback?

Hoàn toàn được. Nhưng chúng ta sẽ phải tự mình viết rất nhiều code, đặc biệt là JavaScript để render các thẻ HTML và điền nội dung theo yêu cầu.

Chúng ta sẽ không thể cập nhật các Server Control với Callback. Thí dụ chúng ta không thể fill data vào đối tượng GridView và render nó sau khi Callback. Để làm được điều giống như Postback, chúng ta sẽ viết JavaScript để sinh ra các thẻ <table><th><tr>… và fill dữ liệu sau khi Callback vào các vị trí tương ứng. Đây có thể nói là một công việc hết sức khổ ải vì chúng ta không tận dụng được lợi thế của các Web Control có sẵn có thể giúp render ra HTML Markup dễ dàng hơn rất nhiều.

 

Thiết kế định hướng Callback giúp trang Web nạp nhanh hơn so với Postback?

Không chính xác. Callback và Postback không xảy ra tại thời điểm ban đầu nạp trang. Postback và Callback xảy ra tại thời điểm khi có một yêu cầu gửi đến server tại thời gian thực (sau khi trang đã được nạp và sẵn sàng). Tại thời điểm gửi yêu cầu và phản hồi lại phía Client, Postback sẽ refresh lại toàn bộ trang (hoặc một vùng nào đó) do đó performance sẽ thấp hơn so với Callback (không vẽ lại bất cứ vùng nào trên trang). Như vậy nếu người dùng gửi yêu cầu không liên quan đến cập nhật UI từ server, thì có thể dùng Callback sẽ cho hiệu quả cao hơn so với Postback. Có thể nói về mức độ an toàn thì Callback có mức an toàn cao hơn vì yêu cầu gửi đi được thực hiện vòng (async) mà không thay đổi lại toàn bộ cấu trúc cây điều khiển của trang (Page Control Tree).

 Chúng ta có thể sử dụng Callback khi thiết kế tính năng Download, kiểm tra sự tồn tại của một dữ liệu (thí dụ username), bình chọn (rate/vote), hoặc tự động nạp dữ liệu vào một số trường nào đó. Trong trường hợp này thì Callback có hiệu quả hơn hẳn so với Postback.

  

 

Callback  và Partial Postback trong Ajax khác nhau như thế nào?

AJAX là viết tắt của Asynchronous JavaScript and XML. Ajax có thể hiểu là công nghệ được hình thành bởi một tập hợp các các kỹ thuật phát triển Web, trong đó có Callback, để tạo nên các trang Web sinh động. Ajax là sự kết hợp cả JavaScript và XML, JSon.. để làm tối đa hóa công việc viết mã của các nhà lập trình Ajax.

 

Partial Postback là một kỹ thuật nằm giữa Callback (kỹ thuật thô sơ nhất) và Postback. Partial Postback trong Ajax sử dụng cơ chế Callback để phát động cuộc gọi lên server và cũng thực hiện các ASP.NET LifeCycle như một postback thông thường. Tuy nhiên Ạjax chỉ điều khiển quá trình rendering trên các control thay vì rendering lại toàn bộ trang Web. Ajax đóng gói các dữ liệu đã được render và gửi ngược trở lại Client. Về phía trình duyệt, Ajax cập nhật DOM cho trang Web với các thay đổi cần thiết.

 

Partial Postback không được hỗ trợ trong ASP.NET 2.0 (trong khi Callback đã có trong phiên bản này). Tuy nhiên AJAX đã giúp các nhà phát triển Microsoft làm điều này bằng cách bổ sung các thư viện hỗ trợ cho Partial Postback.

 

Như vậy Callback chỉ là một kỹ thuật nhỏ lẻ, cấp thấp và có lợi thế hơn Ajax trong việc khai thác các tính năng nhỏ để tăng mức User Experience cho trang Web.

 

Khi nào thì quyết định sử dụng Callback hoặc Postback?

Như đã nói ở trên, Callback đem lại sự thuận tiện cho người dùng khi phải vẽ lại toàn màn hình. Các developer thường hay mắc một nhược điểm là lạm dụng kỹ thuật Callback hoặc đối tượng UpdateManager quá nhiều sẽ khiến cho trang Web load chậm và hiệu quả cũng trở nên phản tác dụng khi hiện tượng co giật vẫn xảy ra do quá nhiều xung đột phát sinh. Do vậy tác giả đề nghị các developer cần hết sức lưu ý 2 nguyên tắc sau:

-  Chỉ sử dụng Callback đối với các action đơn giản, thí dụ rate một bài báo hoặc like một cái gì đó.

-  Đối với các action phức tạp như lưu dữ liệu, nên thiết kế full postback nhằm mục đích an toàn và hạn chế lỗi. Các developer cũng cần estimate xem một action xảy ra sẽ khiến trang Web thay đổi nhiều hay ít, nếu là thay đổi nhiều thì việc khai thác Ajax không đem lại hiệu quả nhiều, thay vào đó full postback là giải pháp tốt nhất. 

 Trong ASP.NET 2.0, các control như TreeView sử dụng rất nhiều script callbacks để thiết kế các tính năng expand/collapse. Trong khi đó GridView sử dụng callback để phân trang và sort dữ liệu mà không gây ra Postback.

    <asp:GridView ID="GridView1"
        DataSourceID="TitlesSource"
        EnableSortingAndPagingCallbacks="true"
        AllowPaging="true"
        AllowSorting="true"
        Runat="Server" />

Hi vọng bài viết này sẽ đem lại lợi ích cho những ai còn đang băn khoăn sẽ thiết kế trang Web theo hướng nào: Postback, Callback hay Ajax.