Cách Edit HTML

Chrome DevTools là bộ công cụ phát triển web mạnh mẽ được tích hợp ngay trên trình duyệt Chrome. Một trong những tính năng hữu ích nhất của DevTools dành cho nhà phát triển web là khả năng chỉnh sửa trực tiếp HTML và CSS trên một trang. Chức năng này cho phép bất kỳ nhà phát triển nào, ngay cả những người có kiến ​​thức về HTML và CSS yếu hơn, nhanh chóng tạo nguyên mẫu và lặp lại các thay đổi tiềm năng cho một trang web.

Khi làm việc trên Lucidchart, một trong những dự án gần đây của tôi là thêm một số dấu kiểm vào đầu vào nơi người dùng điền thông tin thanh toán của họ để truyền đạt phản hồi ngay lập tức khi người dùng nhập đúng thông tin được định dạng và hợp lệ. Mặc dù tôi cảm thấy thoải mái hơn khi làm việc trong mã phụ trợ của chúng tôi so với CSS và HTML, tôi vẫn có thể dễ dàng thực hiện các dấu kiểm này với khả năng chỉnh sửa trực tiếp.

Chỉnh sửa HTML bằng Công cụ Thanh tra

Có hai cách nhanh chóng để mở thanh tra. Đầu tiên là mở DevTools bằng F12 , chọn tab của Element Elements và nhấp vào biểu tượng con trỏ ở trên cùng bên trái. Thứ hai, và nhanh hơn, cách là sử dụng phím tắt Ctrl + Shift + C . Nếu bạn làm việc thường xuyên trong môi trường Linux, rất có thể bạn đã sử dụng phím tắt này một cách tình cờ nhiều lần khi bạn có ý định sao chép văn bản!

Khi trình kiểm tra hoạt động, bạn có thể định vị HTML của bất kỳ thành phần nào trên trang bằng cách nhấp vào nó. Chrome cũng sẽ hiển thị cho bạn định vị và định cỡ thông tin của các yếu tố khi bạn di chuột qua chúng.

Bạn có thể định vị HTML của bất kỳ yếu tố nào trên trang bằng cách nhấp vào nó

Khi một yếu tố được chọn, bạn có thể tương tác với nó theo mọi cách. Bằng cách nhấp chuột phải vào HTML trong tab của Element Elements và chọn Chỉnh sửa thành HTML, bạn có thể chỉnh sửa trực tiếp để đánh dấu trang web mà Chrome sẽ hiển thị ngay lập tức khi bạn chỉnh sửa xong.

Nói với DevTools rằng bạn đã chỉnh sửa xong có thể rất khó. Bản năng đầu tiên của bạn có thể là nhấn phím Escape , nhưng điều này sẽ giúp bạn thoát khỏi việc chỉnh sửa trong khi loại bỏ các thay đổi của bạn. Bạn có thể đảm bảo các thay đổi của mình được lưu bằng cách nhấn Ctrl + Enter hoặc chỉ cần nhấp vào bên ngoài hộp văn bản bạn đang chỉnh sửa.

Chỉnh sửa HTML có thể được hoàn tác hoặc làm lại bằng cách sử dụng các phím nóng Ctrl + Z và Ctrl + Y bình thường . Chúng cũng sẽ bị mất khi làm mới trang trừ khi bạn cho phép chỉnh sửa liên tục.

Để bắt đầu dự án dấu kiểm của mình, tôi đã bắt đầu bằng cách tạo một phần tử nguyên mẫu làm nơi kiểm tra các chỉnh sửa mà tôi muốn thực hiện. Sử dụng chức năng chỉnh sửa trực tiếp của Chrome DevTools, tôi đã thêm một div giữ chỗ chỉ chứa chữ cái X X là dấu kiểm tạm thời tạm thời của tôi.

'Chỉnh sửa dưới dạng HTML' cho phép bạn chỉnh sửa trực tiếp trang web trong Chrome

Rõ ràng, đây là một lý do rất kém cho dấu kiểm, nhưng nó đủ để giúp tôi nhanh chóng xác định một số vấn đề trước mắt. Đối với một điều, dấu kiểm là ở điểm hoàn toàn sai. Ngoài ra, nó làm rối tung sự liên kết của các yếu tố khác trên trang. Cả hai vấn đề này đều có thể được giải quyết bằng một số CSS. May mắn thay, Chrome cũng cung cấp một số công cụ tuyệt vời để tạo mẫu nhanh các thay đổi CSS bằng DevTools.

Chỉnh sửa CSS từ Tab Element Elements

Ở bên phải của chế độ xem HTML trong tab Các yếu tố của Phần cứng, có một khung nhìn hiển thị bảng phân tích về các quy tắc CSS áp dụng cho thành phần được chọn. Khung nhìn này có thể cực kỳ hữu ích để gỡ lỗi rất nhiều lỗi CSS. Ví dụ: vì bạn có thể thấy quy tắc nào áp dụng cho phần tử hiện tại, bạn có thể xác định xem một phần tử có nhận quy tắc CSS mà bạn không mong đợi hay thiếu quy tắc CSS mà bạn nghĩ áp dụng cho phần tử đó không. Khung nhìn CSS cũng hiển thị khi một kiểu được áp dụng bởi quy tắc khớp đang bị ghi đè bởi quy tắc cụ thể hơn.

Khung nhìn CSS cung cấp một số chức năng chỉnh sửa trực tiếp rất hữu ích. Mỗi kiểu có một hộp kiểm bên cạnh, cho phép bạn bật hoặc tắt một số kiểu nhất định và xem chúng ảnh hưởng đến các yếu tố trên trang như thế nào. Bạn cũng có thể áp dụng các kiểu mới cho một thành phần cụ thể, quy tắc CSS hiện có hoặc quy tắc CSS hoàn toàn mới. Tất cả những thay đổi này được phản ánh ngay lập tức trên trang.

Chrome DevTools cung cấp một số chức năng tiện lợi để giúp chỉnh sửa CSS trực tiếp dễ dàng hơn. Điều hữu ích nhất cho những người ít quen thuộc với CSS là tự động hoàn thành. Khi bạn nhập tên phong cách của mình, Chrome sẽ đề xuất các kết quả khớp. Khi bạn nhập tên của kiểu, Chrome cũng sẽ giúp bạn sử dụng giá trị chính xác cho kiểu đó. Đối với các kiểu được liệt kê, như hiển thị vị trí của các ứng dụng, hoặc Chrome, Chrome Chrome sẽ hiển thị các giá trị pháp lý để bạn lựa chọn. Đối với đầu vào số, bạn có thể sử dụng mũi tên lên và xuống để tăng giá trị lên 1 mà không phải nhập lại đơn vị.

Cũng như với HTML chỉnh sửa trực tiếp, bạn có thể hoàn tác hoặc làm lại những thay đổi CSS sống của bạn với Ctrl + Z và Ctrl + Y .

Sử dụng DevTools, tôi có thể dễ dàng tìm ra sự kết hợp của các quy tắc CSS phù hợp với hộp kiểm giả của tôi nơi tôi muốn. Quá trình này bao gồm một chút thử nghiệm và lỗi, nhưng chỉnh sửa trực tiếp khiến chu trình lặp rất ngắn, điều này đặc biệt hữu ích cho một người mới làm CSS như tôi.

Chỉnh sửa CSS trực tiếp là một cách tuyệt vời để nhanh chóng lặp lại các thay đổi CSS nhỏ

Phần kết luận

Chúng tôi chỉ xem xét sơ bộ chức năng chỉnh sửa trực tiếp của Chrome DevTools có khả năng, đặc biệt là trong miền CSS. Những mẹo cơ bản này luôn là vô giá đối với tôi khi tôi gỡ lỗi một vấn đề CSS hoặc nhanh chóng tạo ra một thay đổi CSS mới.