Cách hiệu quả nhất để debug file Javascript của trang web khác

Post gốc trên Facebook

Cái này chắc ít người xài, nhưng mà cứ chia sẻ, biết đâu một lúc nào đó lại có người cần Mình không giỏi trong chuyện viết lách nên nếu viết ngu với khó hiểu thì mong mọi người thông cảm

Tính mình hay làm mấy extension cho Chrome nên việc nghịch code của các trang web khác là điều quá bình thường. Tuy nhiên với một số file Javascript (JS) đã bị minify thì chuyện debug nó ko dễ dàng tí nào. Dù Chrome đã có chức năng Pretty Print nhưng mà cũng không ăn thua, vì nhiều lúc đoạn mình cần debug nó lại nằm chen lẫn giữa các đoạn khác, làm việc debug rất tốn thời gian. Chưa kể mỗi lần F5 thì mọi thay đổi trước đó đều bị mất (một số trang còn không thể edit).

Thế nên mình nghĩ ra được cách này :D Áp dụng nó lần đầu tiên khi làm tool Savetify.

Không có gì cao siêu cả, chỉ đơn giản là viết một Chrome extension để redirect request của file JS cần debug về file của mình ở trên máy tính.

Code cũng đơn giản, chỉ có 2 file, và một thư mục. Cấu trúc như thế này:

- files/
---- abcxyz.js
- background.js
- manifest.json

Để mình giải thích từng file.

Manifest.json

{
  "name": "Debug Locally",
  "description": "",
  "author": "redphx",
  "version": "1.0.0",
  "manifest_version": 2,

  "web_accessible_resources": [
    "files/*"
  ],

  "background": {
    "scripts": ["background.js"]
  },

  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ]
}

Nếu ai đã từng làm Chrome extension rồi thì file này cũng không có gì đặc biệt. Còn nếu chưa biết gì thì tìm hiểu 2 cái này: web_accessible_resources (cho phép các trang web truy cập file trong extension) và chrome.webRequest (dùng để xử lý chuyện liên quan đến HTTP Request)

Background.js

var DATA = {
  'http://abcxyz.com/abcxyz.js': 'abcxyz.js'
};

function handleRequest(url, file) {
  chrome.webRequest.onBeforeRequest.addListener(function(details) {
    return {
      redirectUrl: chrome.runtime.getURL('files/' + file)
    };
  }, {
    urls: [url]
  }, ['blocking']);
}

for (var url : DATA) {
  if (!DATA.hasOwnProperty(url)) {
    continue;
  }
  handleRequest(url, DATA[url]);
}

File này cũng rất đơn giản. Nhiệm vụ của nó là mỗi khi có request file tại địa chỉ http://abcxyz.com/abcxyz.js thì extension sẽ redirect nó về file ở đường dẫn files/abcxyz.js (nằm chung trong thư mục extension). Nhờ vậy nên bạn có thể thoải mái chỉnh sửa nội dung file abcxyz.js và trên web cũng sẽ thay đổi theo. Một ưu điểm của cách này là khi F5 thì sẽ có hiệu lực ngay, không cần phải vào chrome://extensions để Reload thủ công sau mỗi lần thay đổi gì cả.

Kết

Cách này không chỉ áp dụng cho file JS thôi mà có thể cho tất cả các request khác, như JSON, thậm chí cả POST request (có vài hạn chế) ... Và nghe đồn là nó hỗ trợ cả CORS, không cần phải chỉnh sửa gì thêm cả.

Một hạn chế dễ thấy là nếu đường dẫn file JS trên web có thay đổi thì bạn phải vào extension thay đổi lại cho đúng. Và nếu bản live có thay đổi gì thì bạn phải tự cập nhật thủ công lại file trên máy. Khá bất tiện, tuy nhiên nếu bạn chỉ cần debug trong một thời gian ngắn thì nó đáp ứng được nhu cầu rồi.

Lưu ý là nếu ko dùng đến nữa thì nên tắt nó đi. Vì nó luôn chạy ngầm để lắng nghe tất cả request (<all_urls>) nên sẽ khá tốn RAM. Đây là ví dụ thôi nên mình để vậy cho mọi người dễ hình dung, tuy nhiên tốt hơn thì cần request domain nào thì chỉ xin quyền domain đó.

Xin lỗi vì mình đang lười nên ko đưa ví dụ cụ thể vào trong bài viết được, nhưng chắc đọc sơ qua thì cũng có thể hiểu được cơ chế của nó.

Hy vọng sẽ có 1 vài người thấy nó hữu ích Sắp tới có thời gian mình sẽ viết thêm note về cách mình đã nghiên cứu cách tải trên Spotify như thế nào