Đừng sợ theo dõi JavaScript
Bạn bắt tay vào thực hiện một dự án mới ngay sau khi đọc xong bài đăng này. Nó không kỳ lạ - một thứ không quá xa so với dự án trước đây bạn đã thực hiện.
Sau 20 phút chuẩn bị sẵn sàng cơ sở dự án (để bạn có thể bắt đầu dự án thực sự), bạn gặp lỗi. Nó trông không quá tệ, nhưng sau một giờ tìm kiếm trên Google và thực hiện 10 thay đổi để cố gắng khắc phục sự cố, bạn đã trở lại thực tế. Bạn vừa dành một khoảng thời gian tốt cho mã sẽ không ảnh hưởng đến lợi nhuận của bạn. Ngay cả khi bạn không được trả tiền cho dự án, bạn vẫn cảm thấy thất bại.
Trước khi đi sâu vào các cách khác để khắc phục sự cố, hãy lùi lại một bước, giải tỏa tâm trí, uống một cốc nước và sau đó xem xét những điểm sau:
- Không lãng phí thời gian để HỌC - thật lãng phí nếu vô tâm tấn công một vấn đề.
- Nó có đáng để bắt đầu lại không?
- Có thể bạn có thể thử một cài đặt khác, chẳng hạn như một khuôn khổ, để giảm thiểu khả năng xảy ra lỗi cài đặt (vì đó là nơi mà vấn đề thực tế giả đang nổi lên). Điều này cũng có thể khiến các vấn đề của bạn thường gặp ở những user khác của khung.
- Yêu cầu cái nhìn sâu sắc của người khác. Một câu hỏi trung thực không phải là dấu hiệu của sự yếu kém - trên thực tế, nó có thể làm tăng sự hòa hợp trong group .
Bây giờ, hãy giả sử rằng bạn đã trải qua các tùy chọn ở trên. Bạn cảm thấy rằng tốt nhất nên tiếp tục và khắc phục vấn đề này - bạn có thể thực hiện chiến lược nào? Ta sẽ tập trung vào một chiến lược cụ thể - xem xét dấu vết ngăn xếp để xác định nguyên nhân. Tìm ra nguyên nhân root rễ là phần lớn của trận chiến. [ Lưu ý danh sách ngắn này dựa trên kinh nghiệm của riêng tôi và không toàn diện. Nói như vậy, hãy cố gắng có một tâm trí cởi mở để thử các chiến thuật mới. 😄]
- Khi bạn gặp sự cố, hãy commit mã của bạn (ít nhất là vào git local của bạn). Mặc dù mã này có thể không ở trạng thái hoạt động hoàn toàn, nhưng nó vẫn tốt hơn là mớ hỗn độn mà bạn có thể gặp phải. Thực hiện các commit nhỏ trong suốt quá trình sẽ giúp bạn theo dõi những gì bạn đã cố gắng.
- Đặt hẹn giờ (kiểu Pomodoro hoặc chỉ là một bộ đếm thời gian thông thường). Tôi đề nghị không quá 30 phút. Điều này không nghĩa là bạn cần một giải pháp trong khung thời gian đó, nhưng bạn có thể sử dụng một khoảng nghỉ nhỏ để đánh giá lại.
- Có một ý tưởng tốt về nơi để xem (tùy thuộc vào nền tảng của bạn).
- Biết cách chọn ra các từ chính và chi tiết.
- Hiểu cách tra cứu nó.
Ta sẽ đi vào chi tiết hơn về ba điểm cuối cùng từ trên.
Tìm ở đâu
Dưới đây là một số tình huống khác nhau và nơi dấu vết ngăn xếp có thể hiển thị.
- Nút ( backend ) -> control panel terminal
- React / Vue / vanilla JS (giao diện user ) -> control panel trình duyệt
Không có dấu vết ngăn xếp.Tôi làm gì?
Trong một số trường hợp, không có dấu vết cho thấy. Tại sao vậy? Điều này thường là do có một lỗi logic (nó không hoạt động theo cách bạn nghĩ) và bản thân mã có âm thanh. Để cố gắng tìm ra nguồn root của sự cố, bạn có thể đăng nhập thông tin vào console trước và sau nơi bạn cho rằng sự cố là.
Bạn cần tìm gì
Hãy nghĩ về một dấu vết ngăn xếp giống như một chồng đĩa. Khi chúng chồng chất và bắt đầu rơi xuống, bạn biết rằng những chiếc đĩa đôi cuối cùng là thủ phạm. Theo cách tương tự, các hành động mới nhất (có thể là nơi có vấn đề) nằm ở đầu dấu vết ngăn xếp.
Điều quan trọng cần lưu ý là các dòng bạn nhìn thấy trong dấu vết này không phải tất cả đều do lỗi. Đó là lịch sử về nơi mà chương trình / tập lệnh đã phát triển cho đến thời điểm đó, làm cho nó trở thành một công cụ tuyệt vời để xác định vấn đề thực sự.
Thông báo Lỗi / Ngoại lệ
Nếu vấn đề liên quan đến một gói, tác giả có thể đã đưa ra một thông điệp hoặc gợi ý tốt để giúp bạn. Ngay cả những ngoại lệ ở cấp độ ngôn ngữ cũng thường có gợi ý. Đây sẽ là nơi hoàn hảo để bắt đầu.
Tên file
Thông thường, vấn đề nằm ở mã nguồn của chính bạn chứ không phải các gói khác (ít nhất đó là luật chung), vì vậy hãy tìm các file có folder cơ sở của bạn. Nếu file là file mà bạn đã thực hiện thay đổi gần đây, đó là một dấu hiệu tốt để kiểm tra ở đó.
Số dòng
Bạn may mắn. Bạn không chỉ có thể xem tên file , mà dấu vết bao gồm số dòng và đôi khi là số cột. Cột có xu hướng không hữu ích, nhưng này - cảm ơn vì ai đã quyết định đưa chúng vào đó!
(Các) Loại Ngoại lệ
Đôi khi tên của một ngoại lệ được đưa ra có thể cung cấp cho bạn một manh mối chắc chắn. Có thể bạn sẽ không biết chính xác ý nghĩa của nó. Sử dụng một số thông tin chi tiết thu thập được từ phần tiếp theo để tìm kiếm dựa trên những điều này.
Nếu bạn gặp phải vấn đề này thường xuyên, hãy xem xét việc ghi nhớ một số ngoại lệ phổ biến hơn cho ngôn ngữ hoặc khuôn khổ của bạn.
Tôi đi sâu bao nhiêu?
Một số dấu vết rất dài. Bạn có thể sẽ bị nặng mí mắt nếu phải đọc toàn bộ như thể nó là một cuốn tiểu thuyết. Vậy nó chuyển từ hữu ích sang lãng phí thời gian ở đâu?
Kinh nghiệm của tôi là bạn có thể tìm thấy manh mối bạn cần trong 5 mục đầu tiên của dấu vết. Nếu bạn đã xem xét kỹ mà vẫn không tìm thấy gì, thì hãy tiếp tục.
Hãy tạo một lỗi giả để xem một số manh mối có hiệu lực. Bạn có thể chạy phía client hoặc phía server :
firstFunction = () => { secondFunction(); } secondFunction = () => { thirdFunction(); } thirdFunction = () => { notDefined(); } Điều này tạo ra:
Những gì cần tra cứu
Nếu một thông báo được cung cấp trong lỗi, đây có thể là điều tốt nhất để tìm kiếm.
Mẹo cho Google Tìm kiếm
- Sử dụng dấu ngoặc kép để tìm kiếm cụm từ chính xác.
- Đặt dấu hoa thị trong các dấu ngoặc kép đó để chỉ định một từ hoặc cụm từ không xác định.
- Sử dụng dấu trừ để cho thấy rằng bạn muốn loại bỏ các kết quả có chứa (các) từ.
- Hãy nêu cụm từ “cách thực hiện” ở đầu nếu bạn đang tìm kiếm một hướng dẫn (Google có thể thông minh như vậy).
Mẹo cho Tìm kiếm Tràn ngăn xếp
- Thêm các thẻ vào truy vấn của bạn bằng cách đặt chúng bằng dấu ngoặc vuông:
[vue] trigger an event. - Thông thường, bạn muốn tìm kiếm các kết quả có hộp 'câu trả lời' màu xanh lục đồng nhất. Điều này nghĩa là một câu trả lời đã được chấp nhận là câu trả lời đúng.
- Hãy xem các câu trả lời khác ngoài câu được đánh dấu là đúng. Chúng có thể hiện đại hơn hoặc sạch sẽ hơn, hoặc chỉ theo phong cách của bạn.
Nhấp chuột phải vào tất cả các kết quả tìm kiếm có vẻ hứa hẹn để mở chúng trong một tab mới. Để có quy trình nhanh hơn, hãy sử dụng phím tắt của nền tảng của bạn (Ctrl trên Windows, Cmd trên Mac) trong khi bạn nhấp vào liên kết.
Hãy chắc chắn hiểu mã thực sự đang làm gì trước khi bạn chấp nhận nó vào sản phẩm cuối cùng của bạn .
Vấn đề được giải quyết - Hay là?
Đã bao nhiêu lần ta gặp sự cố, thực hiện tìm kiếm, tìm thấy bài đăng Stack Overflow với câu trả lời và sau đó thấy rằng ta đã ủng hộ nó? 😆 Để tránh điều này, ta nên ghi lại vấn đề với giải pháp và quan trọng hơn là làm ít nhất một trong hai điều:
- Tạo một bài kiểm tra mới.
- Viết một số xử lý lỗi. Bạn thậm chí có thể bắt lỗi và tự tìm ra lỗi của bạn bằng một thông báo tùy chỉnh.
if (valueIsNotCorrect) throw new Error(`D'oh, you did it again! Fix me by ...`); Đây là cả hai tài liệu về cơ bản, vì vậy chiến thắng kép!
Để kết thúc, đây là một tràng cười sảng khoái từ Jordan Hall trên Twitter :
window.onerror = error => { // redirect to SO with error as query window.location.href = `https://stackoverflow.com/search?q=[js]${error.message}`; } Các tin liên quan
Làm phẳng mảng trong Vanilla JavaScript với flat () và flatMap ()2018-09-28
Cách sử dụng các phương thức đối tượng trong JavaScript
2018-08-03
Xử lý lỗi trong JavaScript Sử dụng try ... catch
2018-08-03
Hiểu sự kiện trong JavaScript
2018-06-19
Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval
2018-06-12
Hiểu các lớp trong JavaScript
2018-05-04
Truy cập API Rails trong ứng dụng khách JavaScript bằng Rails Ranger
2018-03-15
Hiểu các biến, phạm vi và lưu trữ trong JavaScript
2018-02-20
Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript
2018-01-12
Khám phá đối tượng ngày JavaScript
2017-12-06
