Làm cách nào để tải mã html vào chrome?

Chrome DevTools là bộ công cụ phát triển web mạnh mẽ được tích hợp ngay trong 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 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 đối với 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 thông tin hợp lệ và được định dạng đúng. Mặc dù tôi cảm thấy thoải mái hơn khi làm việc với mã phụ trợ của mình so với CSS và HTML, nhưng tôi vẫn có thể dễ dàng triển khai các dấu kiểm này bằng khả năng chỉnh sửa trực tiếp

Chỉnh sửa HTML bằng công cụ kiểm tra

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

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

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

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

Nói với DevTools rằng bạn đã chỉnh sửa xong có thể khó. Bản năng đầu tiên của bạn có thể là nhấn phím Escape, nhưng thao tác này sẽ khiến bạn không thể chỉnh sửa trong khi loại bỏ các thay đổi của mình. 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

Các 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 bật 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ữ “X” làm dấu kiểm tạm thời của mình

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 tồi để đánh 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 hoàn toàn sai vị trí. Ngoài ra, nó làm rối loạn sự liên kết của các phần 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 “Phần tử”

Ở bên phải của chế độ xem HTML trong tab “Phần tử”, có một chế độ xem hiển thị bảng phân tích về những quy tắc CSS áp dụng cho phần tử đã chọn. Chế độ xem 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ể xem những quy tắc nào áp dụng cho phần tử hiện tại, nên bạn có thể xác định xem một phần tử có đang áp dụng các quy tắc CSS mà bạn không mong đợi hoặc thiếu các quy tắc CSS mà bạn nghĩ đã áp dụng cho phần tử đó hay không. Chế độ xem CSS cũng hiển thị khi một kiểu được áp dụng bởi một quy tắc phù hợp đang bị một quy tắc cụ thể hơn ghi đè

Chế độ xem 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 cách chúng ảnh hưởng đến các thành phần trên trang. Bạn cũng có thể áp dụng các kiểu mới cho một phần tử 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 thuận tiện để giúp chỉnh sửa CSS trực tiếp dễ dàng hơn. 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 kiểu của mình, Chrome sẽ đề xuất các kiểu có khả năng trùng khớp. Sau 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 liệt kê, chẳng hạn như “vị trí” hoặc “hiển thị”, 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 cần phải nhập lại đơn vị

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 các thay đổi CSS trực tiếp của mình bằng 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ử và sai, nhưng chỉnh sửa trực tiếp khiến chu kỳ lặp lại rất ngắn, điều này đặc biệt hữu ích đối với người mới làm quen với CSS như tôi

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

Phần kết luận

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

Làm cách nào tôi có thể chạy mã HTML của mình trên Chrome?

Tại sao tệp HTML của tôi không mở được trong Chrome?

Tại sao mã HTML của tôi không hiển thị trong trình duyệt?