Tự động reload browser với livejs
Javascript
276
White

studybot viết ngày 29/01/2016

Khi viết javascript hay css, bạn có bao giờ cảm thấy bất tiện khi cứ phải Alt + Tab → Ctrl + R sau mỗi lần save file không? Cá nhân mình cảm thấy rất bất tiện vì mỗi lần như thế mình phải ấn 2 tổ hợp phím ở trên mới xem được kết quả. Nhiều khi thay đổi lại rất nhỏ dẫn tớ sau khi refresh browser xong thi chả nhìn ra được mình đã thay đổi chỗ nào :)). Trong những tình huống này giá mà có tool nào cho phép cập nhật browser sau khi save file luôn thi thích.

Thử google thì thấy có http://livejs.com/ là một tool giải quyết nhu cầu này! Về nguyên lý, livejs sẽ định kỳ gửi HEAD request của giao thức HTTP đến máy chủ và kiểm tra thời gian cập nhật của file. Nếu file được cập nhật, livejs sẽ tự động tải file về và tự động refresh browser để hiện kết quả mới.

Theo như tài liệu của livejs nói thì chỉ cần nhúng livejs vào html và nó sẽ làm tất cả các việc còn lại. Ngoài ra mình cũng cần máy chủ để trả về kết quả livejs. Để đơn giản, mình dùng python SimpleHTTPServer vì module này cho phép chạy một máy chủ web đơn giản (chỉ bằng một dòng lệnh) mà không cần cài đặt gì

Cụ thể, mình thực hiện các bước sử dụng livejs như sau:

  1. Tải livejs tại đây http://livejs.com/live.js
  2. Ném các file html, js, css và live.js ở trên vào một thư mục (ví dụ có file index.html)
  3. Nhúng live.js vào index.html.

    <html>
    <head>
    <link rel="stylesheet" href="reset.css"></link>    
    <link rel="stylesheet" href="link.css"></link>    
    <script type="text/javascript" src="live.js"></script>
    </head>
    <body> 
    <!-- YOUR CODE HERE -->
    </body>
    </html>
    
  4. Trong thư mục các file trên, chạy SimpleHTTPServer

    $ python -m SimpleHTTPServer 8000
    
  5. Mở browser và truy cập đến http://localhost:8000/index.html

  6. Viết code :D. Mỗi lần bạn save file, browser sẽ tự động cập nhật index.html

Mình dùng thử và thấy livejs khá tiện. Mình chia màn hình thành 2 cửa sổ, một bên code, một bên browser. Save code và nhìn kết quả bên browser luôn - rất tiện !!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

studybot

15 bài viết.
11 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
14 12
Một vài thủ thuật vim mới biết, ghi lại cho khỏi quên Căn lề các cột dữ liệu Để căn lề ấn phím esc (để sang command mode) :%column t Chọn th...
studybot viết hơn 3 năm trước
14 12
White
11 9
Javascript context (ngữ cảnh?) là một khái niệm khó hiểu trong Javascript. Tuy vậy để code Javascript thành thạo thì việc nắm vững context là điểu ...
studybot viết hơn 3 năm trước
11 9
White
9 1
Một vài ghi chép về Java Hotspot GC Garbage collector thực hiện việc quản lý bộ nhớ thông qua 3 công việc: Gán đối tượng vào pool các đối tượng m...
studybot viết hơn 3 năm trước
9 1
Bài viết liên quan
White
52 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết 3 năm trước
52 8
White
0 0
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 41 phút trước
0 0
White
34 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết 3 năm trước
34 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
15 bài viết.
11 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!