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

29 Tháng Mười Một 2013 vantrung87hvt Javascript

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:

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

28 Tháng Mười Một 2013 vantrung87hvt Javascript

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.

Khác...

CSS

14 Tháng Mười Một 2013 vantrung87hvt HTML-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ọn	Ví 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ính	Ví 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

14 Tháng Mười Một 2013 vantrung87hvt HTML-CSS

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ọn	Ví 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ính	Mô 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.