Google Chrome DevTools

1. Mở DevTools

Google Chrome DevTools — là một bộ công cụ lập trình viên tích hợp sẵn trên trình duyệt Chrome, cho phép nghiên cứu và phân tích các trang web. Với web scraper, DevTools trở thành công cụ không thể thiếu, vì nó cho phép hiểu rõ hơn về cấu trúc trang, xác định selectors, phân tích nội dung động và các yêu cầu mạng. Trong bài viết này, chúng ta sẽ xem xét cách DevTools có thể giúp web scraper thu thập dữ liệu và cải thiện hiệu quả scraping.

Để mở Chrome DevTools, bạn có thể:

• Nhấn F12 hoặc Ctrl+Shift+I (Windows) hoặc Cmd+Opt+I (Mac).
• Nhấp chuột phải vào trang và chọn Xem mã nguồn hoặc Inspect.

Các công cụ sẽ mở ra trong một bảng điều khiển mới, thường nằm ở cuối hoặc bên phải cửa sổ trình duyệt. Bảng DevTools chứa nhiều tab, mỗi tab được thiết kế để thực hiện một số nhiệm vụ nhất định, rất quan trọng đối với web scraper.

Các tab DevTools đặc biệt hữu ích cho web scraper: Elements, Console, Network, Sources và Application.

2. Tab Elements

Tab Elements: nghiên cứu HTML và CSS

Tab Elements — là công cụ chính để phân tích cấu trúc trang và chọn các thành phần. Tại đây bạn có thể xem, chỉnh sửa và sao chép cấu trúc HTML và CSS của trang.

Chức năng chính của tab Elements:

• Xác định selectors. Nhấn vào biểu tượng mũi tên ở góc trên bên trái bảng điều khiển và chọn bất kỳ thành phần nào trên trang. Mã HTML tương ứng sẽ mở trong DevTools. Điều này rất hữu ích để xác định các thuộc tính id, class và các thuộc tính khác, có thể được sử dụng trong CSS hoặc Xpath selectors để scraping.
• Chỉnh sửa HTML và CSS theo thời gian thực. Bạn có thể thay đổi HTML và CSS của các thành phần để thử nghiệm trực quan, điều này giúp hiểu rõ hơn về cách thay đổi sẽ hiển thị trên trang. Ví dụ: bạn có thể ẩn các phần tử cụ thể hoặc thay đổi màu sắc để hiểu rõ hơn về những phần nào của trang bạn cần.
• Sao chép selectors. Nhấn chuột phải vào một phần tử, bạn có thể chọn "Copy" và sao chép selector CSS hoặc XPath, điều này đặc biệt hữu ích cho web scraping.

Ví dụ: Nếu bạn cần chọn phần văn bản tiêu đề <h1>, chỉ cần nhấp vào đó và sao chép selector của nó để sử dụng trong mã để trích xuất.

3. Tab Console

Tab Console: thực thi JavaScript cho nội dung động

Console cho phép nhập và thực thi mã JavaScript trực tiếp trên trang. Điều này hữu ích để tương tác với nội dung động và phân tích JavaScript, quản lý các phần tử.

Ứng dụng Console cho web scraper:

• Trích xuất dữ liệu bằng JavaScript. Có thể sử dụng các lệnh đơn giản như document.querySelector để thử nghiệm chọn các thành phần và đảm bảo rằng selector hoạt động chính xác.
• Thực thi mã để tương tác với các thành phần. Ví dụ: nếu bạn cần "nhấp" vào một nút hoặc "tải thêm" một phần nội dung, Console cho phép thực thi mã để kiểm tra cách các thành phần phản ứng với sự kiện.
• Tìm lỗi. Nếu scraping được thực hiện thông qua tự động hóa, tab Console cho thấy lỗi liên quan đến JavaScript hoặc các yêu cầu mạng và giúp hiểu tại sao một số thành phần không tải hoặc không hiển thị.

Ví dụ: Nếu cần thử nghiệm chọn một nút có class là load-more, trong Console bạn có thể nhập document.querySelector('.load-more').click() và kiểm tra cách nút phản ứng với lệnh.

4. Tab Network

Tab Network: phân tích các yêu cầu mạng

Network — là tab quan trọng để phân tích các yêu cầu mạng mà trang thực hiện. Nhiều trang web tải dữ liệu qua các yêu cầu không đồng bộ (ví dụ: AJAX), điều này có thể làm khó khăn việc scraping. Network cho phép theo dõi tất cả các yêu cầu mạng, sao chép chúng và phân tích phản hồi từ server.

Chức năng chính của tab Network:

• Theo dõi yêu cầu AJAX. Khi tải trang, bạn có thể thấy tất cả các yêu cầu được thực hiện cũng như phản hồi của chúng. Điều này đặc biệt hữu ích nếu dữ liệu được tải động. Bạn có thể theo dõi các yêu cầu trả về dữ liệu cần thiết và sau đó lặp lại chúng trong mã của mình để lấy dữ liệu trực tiếp.
• Sao chép yêu cầu. Nhấp chuột phải vào yêu cầu, bạn có thể sao chép nó dưới dạng cURL hoặc fetch. Điều này cho phép lặp lại các yêu cầu để lấy dữ liệu trực tiếp từ server.
• Phân tích tham số của yêu cầu. Network hiển thị tiêu đề, tham số và cookies được gửi với các yêu cầu. Điều này giúp hiểu những dữ liệu nào cần thiết cho server để thực hiện yêu cầu. Ví dụ: nhiều trang web sử dụng tokens xác thực để bảo vệ dữ liệu, và phân tích tiêu đề của các yêu cầu giúp hiểu cách vượt qua những hạn chế này.

Ví dụ: nếu dữ liệu được tải động qua yêu cầu AJAX, bạn có thể chọn yêu cầu tương ứng trong Network, xem URL và phản hồi của nó để sử dụng yêu cầu đó để lấy dữ liệu trực tiếp.

5. Tab Sources

Tab Sources: nghiên cứu JavaScript và nội dung động

Sources — là tab nơi bạn có thể nghiên cứu các tệp JavaScript, CSS, hình ảnh và các tài nguyên khác của trang. Web scraper có thể sử dụng tab này để phân tích logic của trang web và xử lý nội dung động.

Chức năng chính của tab Sources:

• Tìm các tệp JavaScript. Trên nhiều trang, dữ liệu hoặc tính năng được tải thông qua JavaScript. Trong Sources, bạn có thể tìm và mở các tệp JavaScript thống trị hiển thị và tải dữ liệu.
• Đặt điểm breakpoint. Điều này cho phép dừng thực thi mã tại một dòng nhất định và xem cách dữ liệu được tải và các thành phần khác nhau tương tác. Đặc biệt hữu ích để phân tích các trang sử dụng JavaScript phức tạp.
• Xem giá trị biến. Bạn có thể theo dõi các thay đổi trong biến và hiểu rõ hơn về logic của trang, điều này giúp ích nếu nội dung được tải thông qua các hàm JavaScript phức tạp.

6. Tab Application

Tab Application: làm việc với cookies và Local Storage

Application — là tab nơi bạn có thể nghiên cứu cookies, Local Storage và các dữ liệu khác được lưu trữ phía client. Những dữ liệu này có thể hữu ích khi làm việc với các trang web yêu cầu xác thực hoặc theo dõi hành vi người dùng.

Chức năng chính của tab Application dành cho web scraper:

• Phân tích cookies. Nhiều trang web sử dụng cookies để xác thực hoặc theo dõi người dùng. Khi phân tích các yêu cầu có xác thực, tab Application cho phép xem cookies nào là cần thiết để truy cập nội dung.
• Nghiên cứu Local Storage và Session Storage. Các kho lưu trữ này cũng được sử dụng để lưu thông tin phía client. Nếu trang web tải dữ liệu hoặc cài đặt từ Local Storage, bạn có thể trích xuất và sử dụng thông tin này trong mã scraping.
• Làm việc với tokens xác thực. Một số trang lưu trữ tokens trong Local Storage hoặc cookies. Biết token và cách làm mới nó, bạn có thể truy cập dữ liệu thông qua API hoặc yêu cầu AJAX.

Ví dụ: nếu một trang yêu cầu xác thực, tab Application cho phép bạn trích xuất cookies hoặc tokens cần thiết và sử dụng chúng để thực hiện các yêu cầu.

7. Lời khuyên thực hành

Lời khuyên thực hành khi sử dụng DevTools cho scraping

• Tìm dữ liệu trong Network. Nếu nội dung được tải không đồng bộ, hãy tìm yêu cầu phù hợp trong Network và nghiên cứu URL, tham số và tiêu đề của nó.
• Sử dụng Console để kiểm tra selectors. Trước khi triển khai mã scraping, bạn có thể kiểm tra selectors trong Console bằng cách sử dụng các lệnh như document.querySelector hoặc document.querySelectorAll.
• Sao chép yêu cầu fetch cho API. Nếu trang web sử dụng API, Network cho phép sao chép yêu cầu và thử nghiệm nó trong script để nhận dữ liệu trực tiếp, bỏ qua HTML.
• Tìm các script quản lý nội dung. Trong Sources, bạn có thể tìm các tệp JavaScript xử lý nội dung động, hiểu cách chúng hoạt động và sau đó điều chỉnh logic để scraping.
• Học cách làm việc với các tokens xác thực và cookies. Một số trang bảo vệ dữ liệu bằng cookies hoặc tokens, vì vậy rất hữu ích để lưu các dữ liệu này và truyền chúng trong các yêu cầu.