Cách cấu hình Phản ứng mã nguồn gốc bằng Xcode / Dụng cụ / Trình cấu hình thời gian


19

Chúng tôi đang sử dụng React Native 0.59.10và React-Redux 5.0.7và đang gặp vấn đề về hiệu năng liên quan đến CPU, trong đó các hành động Redux của chúng tôi đang hoàn thành ~ 0,25 giây.

Chúng tôi đã định hình bằng cách sử dụng cấu hình Time Profiler trong Dụng cụ, nhưng không có mã JS nào của chúng tôi được ký hiệu.

Gỡ lỗi từ xa trong Chrome dường như chỉ gỡ lỗi trang "thanh tra từ xa", điều này hoàn toàn không có ích.

Có cách nào để xây dựng / đính kèm bản đồ nguồn hoặc tượng trưng cho các địa chỉ bộ nhớ được nhìn thấy bên dưới, với các tên / cuộc gọi của hàm JS không?

Dụng cụ Callstack


Nếu bạn đang sử dụng expo, bạn có thể chạy ứng dụng trực tiếp bằng chrome và gỡ lỗi ở đó.
Mykybo

Không, chúng tôi đang sử dụng một số lượng lớn các thành phần bản địa, và kết quả là hội chợ triển lãm không phải là một lựa chọn.
Craig Otis

Câu trả lời:


1

Trình biên dịch Firefox

Hiểu về trình cấu hình Firefox

Firefox Profiler có nhiều tài liệu hiện tại có sẵn tại profiler.firefox.com/docs/. Tuy nhiên, những điều sau đây có thể có một số thông tin hữu ích cho các vấn đề cụ thể của Gecko.

Bạn có thể kiểm tra một số câu hỏi thường gặp về Firefox Profilers.

Báo cáo vấn đề về hiệu suất có hướng dẫn từng bước để lấy hồ sơ khi được các nhà phát triển Firefox yêu cầu.

1. Dòng thời gian

Dòng thời gian có một số hàng dấu vết (phân đoạn màu) biểu thị các sự kiện thú vị. Di chuột qua chúng để xem thêm thông tin. Bên dưới các dấu vết là các hàng tương ứng với hoạt động trên nhiều luồng khác nhau.

Mẹo: Các chủ đề được chú thích bằng "[mặc định]" nằm trong quy trình gốc (còn gọi là "UI", còn gọi là "chrome trình duyệt", còn gọi là "chính") và các chủ đề được chú thích bằng "[tab]" có trong nội dung Web (aka "con") quá trình.

nhập mô tả hình ảnh ở đây

Mẹo: Các tác vụ chạy dài trong quy trình cha mẹ sẽ chặn tất cả đầu vào hoặc bản vẽ bằng UI trình duyệt (còn gọi là "UI jank") trong khi các tác vụ chạy dài trong quy trình nội dung sẽ chặn tương tác với trang nhưng vẫn cho phép người dùng xoay và phóng to xung quanh nhờ APZ.

Dấu vết

Red: Những điều này cho thấy rằng vòng lặp sự kiện đang không phản hồi. Lưu ý rằng các sự kiện ưu tiên cao như vsync không được bao gồm ở đây. Cũng lưu ý rằng điều này cho thấy những gì sẽ xảy ra đã có một sự kiện đang chờ và không nhất thiết là có một sự kiện đang chờ xử lý trong thời gian dài đó.

Black: Chúng cho biết các cuộc gọi IPC đồng bộ.

2. Cây gọi

nhập mô tả hình ảnh ở đây

Cây Gọi hiển thị các mẫu được sắp xếp theo 'Thời gian chạy' sẽ hiển thị dữ liệu theo thời gian đồng hồ treo tường. Có các tên màu xám nhạt hơn ở bên phải của các thành phần cây cho biết mã đến từ đâu. Xin lưu ý rằng các phần tử có thể từ thư viện JavaScript, Gecko hoặc hệ thống. Lưu ý rằng nếu một số chức năng chưa được đặt tên đúng, biểu tượng có thể chưa được hoàn thành.

Mẹo: Bạn có thể nhấp chuột phải vào tên hàm để có tùy chọn sao chép tên của nó vào bảng tạm.

3. Chia sẻ hồ sơ Nhấp vào "Chia sẻ ..."> Chia sẻ thừa nhận rằng các URL bạn đã mở và các tiện ích mở rộng Firefox của bạn sẽ được bao gồm trong dữ liệu hồ sơ được gửi đến máy chủ. Nếu bạn chọn một phạm vi thời gian khác, URL được tiết lộ bằng cách nhấn "Permalink" sẽ thay đổi để bạn có thể chắc chắn rằng người nhận URL sẽ thấy những điều tương tự bạn đang thấy.


Trình cấu hình Firefox có hoạt động khác với trình biên dịch Safari hoặc Chrome không? Theo kinh nghiệm của tôi, họ tự cấu hình tab / trang gỡ lỗi từ xa chứ không phải ứng dụng React Native đang chạy.
Craig Otis
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.