Câu hỏi Công cụ dành cho nhà phát triển Chrome: Hỗ trợ Snippets là gì?


Kể từ phiên bản 19, Trình kiểm tra web của Chrome có tính năng thử nghiệm được gọi là "hỗ trợ đoạn trích". Đây là cách kích hoạt nó:

  1. Mở chrome: flags, bật "Thử nghiệm công cụ dành cho nhà phát triển", khởi động lại.

  2. Mở Thanh tra Web (Công cụ dành cho nhà phát triển), nhấn vào biểu tượng bánh răng cài đặt ở góc dưới bên phải, bật "Hỗ trợ đoạn mã", khởi động lại.

    enable snippets support

  3. Mở bảng điều khiển Tập lệnh, nhấp vào biểu tượng "cây điều hướng" ở bên trái và tìm tab Đoạn trích trống.

    snippets tab

Câu hỏi của tôi là: Tôi có thể sử dụng cái này để làm gì? Làm thế nào tôi có thể cư trú này với đoạn?


76
2018-05-06 13:01


gốc


Hiện tại, có rất nhiều tài liệu hoàn chỉnh về các đoạn trích: developers.google.com/chrome-developer-tools/docs/… Thưởng thức - Paul Irish
@PaulIrish Trang của liên kết không chứa đoạn trích nữa. - hello_amigo


Các câu trả lời:


Tóm lại, các đoạn mã là một giao diện điều khiển nhiều dòng, một luồng công việc phát triển JS lặp lại và một kho lưu trữ liên tục cho các trình trợ giúp gỡ lỗi phổ biến.

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

Một số trường hợp sử dụng Snippets có thể trợ giúp là:

  • Dấu trang - tất cả các dấu trang của bạn có thể được lưu trữ dưới dạng đoạn trích, đặc biệt là những đoạn bạn có thể muốn chỉnh sửa.
  • Tiện ích - gỡ lỗi người trợ giúp để tương tác với trang hiện tại có thể được lưu trữ và gỡ lỗi. Danh sách các tiện ích như vậy được cộng đồng quản lý có sẵn.
  • Gỡ lỗi - Đoạn mã cung cấp một bảng điều khiển đa dòng với cú pháp tô sáng và nhấn mạnh, làm cho nó thuận tiện cho việc gỡ lỗi mã nhiều hơn một lớp lót.
  • Mã vá lỗi khỉ - Mã bạn muốn vá trong thời gian chạy có thể được thực hiện thông qua Snippets, mặc dù nhiều lần bạn chỉ có thể chỉnh sửa mã trực tiếp trong tab Nguồn.

snippets screenshot

Cuối cùng, cá nhân tôi đã thu thập một vài đoạn trích phổ biến mà bạn có thể đưa vào kho vũ khí của mình: github.com/paulirish/devtools-addons/wiki/Snippets


Để chạy đoạn trích một cách nhanh chóng, bây giờ bạn có thể làm điều này. Ctrl-Shift-P cho "bảng lệnh", sau đó backspace, và sử dụng một! tiền tố, sau đó nhập bất kỳ tên đoạn mã nào bạn muốn chạy.

enter image description here


83
2018-05-07 18:15



Chrome <3 <3 <3 - Eric Wendelin
Cách nhanh nhất để thực thi đoạn mã là gì? Tôi có thể Ctrl + Shift + I (mở DevTools), Ctrl + P (tìm kiếm mờ), bắt đầu nhập tên đoạn mã, ENTER (đoạn mã mở), Ctrl + ENTER (đoạn mã thực thi). Tôi hy vọng tôi đang thiếu một cái gì đó và có một cách nhanh hơn. Một "thanh công cụ đoạn trích" trong trình duyệt sẽ được tốt đẹp. - Šime Vidas
@ ŠimeVidas đó là cách nhanh nhất mà tôi biết. Bạn thường sử dụng đoạn trích nào để quay số nhanh? - Paul Irish
Tôi tự hỏi nếu Paul Irish đã bao giờ trả lời một câu hỏi, và KHÔNG PHẢI được đánh dấu là câu trả lời đúng .... - Steve
@PaulIrish Hoặc Ctrl-P, để trường này trống và bạn không phải xóa >. Cảm ơn vì tiền hỗ trợ! - Šime Vidas


Tôi hỏi Paul Irish nếu anh ta biết bất cứ điều gì về nó, anh ta không chắc chắn, nhưng nói rằng nó không hoàn toàn thực hiện được nêu ra và chỉ cho tôi theo dõi lỗi, tôi tìm thấy người đứng đầu  và xem xét một số mã khác biệt có rất nhiều FIXME: To be implemented. bình luận.


12
2018-05-08 13:53



Nó gần như hoàn tất. Nó cho phép hiệu quả một giao diện điều khiển nhiều dòng nhưng với đầu vào có thể tìm kiếm / có thể đặt tên. - Paul Irish
Tôi nghĩ là nhiều, tôi thực sự vui mừng về tính năng này. - JaredMcAteer
Câu trả lời tốt hơn bởi vidar một vài câu trả lời dưới đây - android.nick
Có vẻ như nó hoạt động tốt cho đến nay, trong 24.0.1287.1 canary - Jon Schoning
Giao diện người dùng hiện tại là thô. Trên Windows, bạn chỉ có thể lưu các đoạn mã bằng cách sử dụng Ctrl + S (chỉ cần đảm bảo rằng tiêu điểm nằm trên cửa sổ bên phải). Dường như không có phím tắt để chạy đoạn trích. - Stefan


Nhấp chuột phải để tạo một cái mới.

Chrome DevTools Snippets — New


9
2017-11-12 12:34



không phải ở tất cả các intitive - aWebDeveloper


Hỗ trợ đoạn mã Công cụ dành cho nhà phát triển Chrome cho phép tạo / chỉnh sửa / lưu và thực thi đoạn mã javascript.


5
2017-07-06 20:17



Tính năng này hiện đang hoạt động trên các bản dựng Chrome mới nhất nhưng giao diện người dùng chưa thực sự đẹp. Các đoạn mã có thể được thao tác từ trình đơn ngữ cảnh điều hướng. - vsevik


Tôi không thể tự mình kích hoạt thử nghiệm đó (không có Developer Tools experiments trong tôi chrome:flags, nhưng từ Safari, tôi tìm thấy điều này giải trình:

Trong ngắn hạn, nó "là một tiện ích nhỏ cho phép bạn nhập các khối của HTML và CSS và có nó trả lại trên bay".

Từ bài đăng trên blog, có vẻ như nó là lỗi trong Safari, vì vậy có thể Chrome chưa triển khai.


3
2018-05-08 13:21



Hỗ trợ đoạn mã Công cụ dành cho nhà phát triển Chrome là một tính năng hoàn toàn khác. - vsevik


Bạn có thể tìm thấy danh sách các đoạn trích hữu ích tại đây http://bgrins.github.io/devtools-snippets/

một trong những đoạn mã hữu ích là 'jquerify.js' - Sử dụng điều này bạn có thể đưa jQuery vào bất kỳ trang nào nếu nó chưa được đưa vào.


3
2017-08-19 09:49



github.com/paulirish/devtools-addons/wiki/Snippets - NavaRajan