Code với google chome

Trình duyệt là một cái tên phần mềm mà hẳn ai biết đến internet thì hẳn biết nó. Đặc biệt với các lập trình viên về website, trình duyệt web là thứ chúng ta tiếp xúc rất nhiều sau các editor về code.

Mỗi trình duyệt đều có ưu nhược điểm của nó. Đối với giới lập trình web thì chome là một trình duyệt  được ưa chuộng  vì chúng nhanh, tiện lợi, có Developer Tools vô cùng mạnh mẽ cùng với  rất nhiều addons hỗ trợ việc lập trình.  Trong khuôn khổ bài viết mình sẽ giới thiệu về các tính năng và các addons này.

Dưới đây là những trình duyệt  được đánh giá cao :

  1. Google Chrome
  2. Firefox
  3. Opera
  4. Safari
  5. IE (Internet Explorer)
  6. Torch Browser
  7. Maxthon
  8. Seamonkey
  9. Avant Browser
  10. Deepnet Explorer
  11. Cốc Cốc
  12. Microsoft Edge

Để mở Developer Tool , bạn có thể nhấn  “F12” hoặc nhấn tổ hợp phím  Ctrl + Shift + J shoặc trên trình duyệt  nhấn chuột phải chọn Inspect

show developer tool
Show developer tool

1.Elements

 

Ở tab này, hiển thị html  của các phần tử trên web.Bạn cũng có thể chỉnh sửa mã lệnh HTML trực tiếp trên khung này bằng cách click đúp lên phần tử xuất hiện trong khung hoặc nhấn F12. Khi click lên một phần tử HTML bạn sẽ thấy mã lệnh CSS tương ứng dành cho phần tử này ở khung phía tay phải. Ở đây bạn có thể thay đổi CSS và theo dõi thay đổi trực tiếp trên trình duyệt.

Để biết  chính xác html của một thành phần trên web, thay vì việc tìm kiếm trong html trong element bạn chỉ việc đặt trỏ chuột lên thành phần mà bạn muốn xem html, css của nó. sau đó nhấn phải chuột chọn Inspect . như video dưới đây:

 

2.Networks

Ở Tab này bạn sẽ thấy các thông tin chi tiết về các request từ trình duyệt gửi tới server bao gồm địa chỉ URL của request, trạng thái request (thành công hay có lỗi của server…), tổng  sốrequest ,thời gian để server trả về kết quả request…

Khi mình tối ưu performance của website và fix bug với ajax mình hay sử dụng tab này. Đối với việc tối ưu website thì mình có thể biết được các file được load, tổng số request để có der hướng tối ưu. Còn đối với việc fix bug  với ajax thì mình cảm thấy nó thật là hữu dụng khi nó cho bạn biết các biến bạn cheap jerseys truyền vào, action mà bạn  đùng để sử lý ở tab Headers và có kết quả ở phần Preview.

 

3.Console

Tab này, liên quan đến javascript. Bạn debug javascript và giá trị trả về sẽ được hiển ??? thị ở đây. bạn có thể thử với đoạn code sau a :

<script>
console.log( 'test gia chị hiển thị trong Sources' );
</script>

Leave a Reply

Your email address will not be published. Required fields are marked *