Google Chrome Developer Tools Là Cái Quái Gì Mà Khiếp Thế

Developer tools là môt công cụ, đươc tích hơp sẵn vào các trình duyệt như google chrome.
Tiện ích này dành cho các lập trình viên, admin blogger có thể truy cập sâu vào các phần tử cấu tạo nên môt trang web
code developer tools
developer tools công cụ dành cho lập trình trang web hoạt động dưới sự kết hợp của rất nhiều đoạn mã code


Thực ra thì tôi cũng thỉnh thoảng mò vào mã nguồn trang web rồi loay hoay chỉnh sửa ở trong đó để tập làm lập trình viên
  • Từ chỗ học word html ngồi cả đêm chả biết code là gì? cậy miệng chả dám hỏi
  • cứ như thế mò mẫm bắt chước học mã nguồn trang web
  • Mấy trang web là họ viết sẵn theme rồi giờ chỉ cần chỉnh vài thứ nọ kia là ưng cái bụng 
  • nói thật mấy ngày đầu web xấu ko thể tả nổi, nhưng cả đám hò reo ĐẸP NHƯ TIÊN CỞI TRUỒNG.
  • Vãi thật, phải tự khen mình thôi
Nói thực với anh em là tôi cực ghét cái trò săm soi vào dev mã nguồn html của blog
Tại nghèo, nên cũng đành cắn răng lọ mọ chỉnh sửa nọ kia đôi khi lỗi tùm lum
code html developer tools
developer tools website công cụ dành cho nhà phát triển

  • Bạn muốn chỉnh sửa mã nguồn cho trang web?
  • Bạn băn khoăn không biết viết mã cho trang blog cá nhân của mình?
  • Mình hứa với bạn là chỉ cần bỏ ra 5 phút, đọc hết bài viết này là có thể chỉnh sửa giao diện trang web theo ý muốn
developer tools là công cụ dành cho nhà phát triển trang web

Nôm na: Những người thường xuyên làm việc với ngôn ngữ máy tính. ví dụ như lập trình viên internet, những blogger vv... cần phải biết chút dev tools 
Đại khái thì nó là thế, họ dùng công cụ dev để soạn thảo các kịch bản trình duyệt cho trang web

Thực sự thì các Website về cơ bản nó là một hệ thống phức tạp với các mã nguồn html, css, java php...các thông tin liên lạc được mã hóa giữa web services và máy khách, các kịch bản trình duyệt...

Hơn nữa có rất nhiều máy chủ khác nhau, độc giả duyệt trên nền tảng di động khác nhau
Vì vậy công cụ developer tool là hữu ích trong việc chạy thử nghiệm và kiểm tra các trang Web trên các nền tảng di động gồm hệ thống front end, lớp trung gian, dịch vụ web, cơ sở dữ liệu, bảo mật, hiệu năng… vân vân...

Tóm lại là: dev sinh ra Để hỗ trợ cho việc kiểm tra các phần tử trong trang web, thông qua giao diện đồ họa của nó, rất nhiều trình duyệt web google chrome, ie, Firefox, Safari bắt buộc phải có các "công cụ dành cho chúng ta những admin quản trị trang web"
Mấy anh em bên dev chắc chắn là hiểu cái này hơn tôi
ngày xưa nói thật là tôi cũng chẳng biết bước đầu tiên phải vào cửa sổ làm việc của nó như thế nào đâu anh em ạ

hóa ra có rất nhiều cách để truy cập vào công cụ dành cho nhà phát triển developer tool

Developer tool trên trình duyệt google chrome

google chrome developer tools
cách vào developer tools trên trình duyệt google chrome


  1. Bước 1: với trình duyệt google chrome vào dấu mở rộng phía trên bên cùng, phải trình duyệt
  2. Bước 2: kéo xuống vào phần more tools
  3. Bước 3: vào phần developer tools
Hoặc nhấn tổ hợp phím tắt ctrl+shift+i
đấy chỉ vài bước đơn giản thế thôi là chúng ta bắt đầu với công việc săm soi vào mã code rồi đó
Bố mẹ còng lưng kiếm tiền cho con ăn học, thằng con ở nhà luyện cửu âm chân kinh, cày code developer tools học lập trình mã hóa trang web bitcoi token tiền ảo cái mả mẹ gì đó
cửa sổ làm việc và kiểm tra các phần tử có trong trang web blog chém gió

Còn nhớ cái cảm giác lần đầu tiên biết được cái mã này cảm thấy ối dồi ôi hoảng luôn.
Nhưng anh em yên tâm đừng sợ đã có tôi ở đây rồi

cùng nhau khám phá từng chút một nhé

lúc này trang web của chúng ta sẽ được chia ra làm 3 phần cơ bản ví dụ như hình trên
  • Phần giao diện trang web đã được thu nhỏ lại
  • Phần thanh công cụ: Inspect, Device Mode, Elements panel... vân vân
  • Bên dưới thanh công cụ là cửa sổ các mã nguồn cấu thành nên một trang web: ví dụ như hình trên
  • hóa ra bây giờ mình mới biết trang web mà hàng ngày chúng ta vẫn đọc hàng ngày nó là tổng hợp của vô vàn các mã nguồn khác nhau, cả đời tôi chưa bao giờ nhìn thấy thứ gì nó lại kinh khủng đến như vậy
Bây giờ chúng ta thử thực hành quan sát giao diện front-end (tất cả những gì người đọc nhìn thấy gọi là front-end)
ví dụ với blog chém gió này nhé
đầu tiên nhấn vào thanh công cụ bên trái inspect hoặc ctrl+shift+c
inspect developer tools
inspect trong developer tools có nghĩa là quan sát

Mục đầu tiên của thanh công cụ là inspect. khi chúng ta rê chuột vào vị trí bất kỳ thì nó sẽ cho ta các thông số như ví dụ trên là mình đang vào phần thẻ tiêu đề của bài viết
  • màu chữ: #2b00fe (màu xanh)
  • kích cỡ là 23px
  • xem phần css còn rất nhiều các thông số khác nữa
tương tự bạn có thể rê con trỏ vào bất kỳ phần nào trên trang web thì nó sẽ hiện mã nguồn cho chúng ta quan sát
Developer tools tuyệt vời như ông mặt trời. Cảm thấy nó bừng sáng như nói với ta một điều: hãy làm một blogger tử tế, đừng chém gió linh tinh nữa 
Ok. bây giờ chúng ta sẽ thay đổi bất kỳ các thông số thì màu sắc kích cỡ và bố cục của trang web cũng sẽ lập tức thay đổi theo

Sau khi đã quan sát và biết được bản chất của các trang web thực ra nó đơn giản là các đoạn mã code được chạy trên trình duyệt và sau đó sẽ hiển thị cho người đọc nhìn thấy

Vì một trang web là tập hợp của rất nhiều mã và chúng ta tinh mắt một chút tôi tin là anh em sẽ chỉnh sửa được
vấn đề là tìm ra đoạn code chính xác đó ở đâu? và như thế nào?
view code html developer tools
đây là đoạn mã code cỡ chữ thay đổi chỉ số 23px thành một giá trị khác tùy ý muốn

  1. bước 1: đăng nhập vào blog để chỉnh sửa mã nguồn trang web chúng ta quản lý
  2. nhập ctrl+f để tìm kiếm đoạn mã chúng ta muốn chỉnh sửa
  3. chỉnh sửa code website và lưu lại
  4. duyệt trang web xem những thay đổi đến khi nào ưng cái bụng thì thôi
  5. chú ý: vì có rất nhiều thứ rối mắt nên tôi thường lưu một bản sao notepad trước khi chỉnh sửa bất kỳ một thứ gì đó đề phòng khi bị lỗi còn có file backup lại
tóm lại nếu anh em nào mà đã nắm được phần quan sát và chỉnh sửa mã nguồn cho trang web rồi thì tự dưng ngầu đét, trở thành lập trình viên front-end rồi đó.
Khét lẹt luôn
muốn giao diện theme như thế nào chỉ cần búng bàn phím cái là ok ngay, phép màu trong bàn tay

đọc đến đây thì hãy thử thực hành với trang blog của bạn nhé: hãy thay đổi theo ý thích cá nhân bắt đầu từ header logo, main menu, sidebar, và footer nhé.
Tôi tin là anh em sẽ có một khởi đầu thú vị.
Chưa hết đâu inspect mới chỉ là bước khởi đầu, còn rất nhiều công cụ mạnh mẽ đang chờ chúng ta khám phá đó
Xem thêm video dưới đây


  1. inspect: quan sát và chỉnh sửa (chúng ta vừa làm quen ở phần trên rồi)
  2. Simulate mobile devices (mô phỏng thiết bị di động)
  3. Elements panel (bảng xem các thay đổi các đối tượng và css)
  4. Sources panel (Gỡ lỗi JavaScript, duy trì các thay đổi được thực hiện trong DevTools qua các lần tải lại trang, lưu và chạy các đoạn mã JavaScript cũng như lưu các thay đổi bạn thực hiện trong DevTools)
  5. Network panel (Xem và gỡ lỗi các hoạt động mạng)
  6. Performance panel (Tìm cách cải thiện hiệu suất tải và thời gian chạy cho trang web)
  7. Application panel (Kiểm tra tất cả các tài nguyên được tải, bao gồm cơ sở dữ liệu IndexedDB hoặc Web SQL, lưu trữ cục bộ và phiên, cookie, Bộ đệm ứng dụng, hình ảnh, phông chữ ...)
  8. Lighthouse (đo tốc độ trang web và gợi ý để trang web của bạn chạy nhanh như chó tuột xích)
  9. vân vân còn rất nhiều thứ để cho anh em khám phá, nếu muốn tìm hiểu thì có thể xem tài liệu này nhé: https://developer.chrome.com/docs/devtools/overview/
  10. Bạn phải trải nghiệm và khám phá sức mạnh của từng công cụ, thực ra thì tôi toàn chém gió đấy chả biết mẹ gì về code đâu anh em ạ
ngày xưa cứ nghĩ là việc này không dễ nhai đâu đừng tưởng
việc này không ngon ăn đâu đừng có nhá khoai lắm.

khuyên anh em là đừng có mò code một mình nhé, có bạn thêm vui
thằng sau ủn mông thằng trước, anh em có gì cứ học hỏi kéo nhau lên
tài liệu thì vào đây google chrome developer tools mà tham khảo

mấy thằng cứ thế bảo nhau mò mẫm từng bước khám phá ra một thứ gì đó là hò hét cứ như là vừa tìm ra kỳ quan của vũ trụ ấy

Buồn cười vãi

thực ra thì nói gần nói xa chả qua nói thật: bản chất của vấn đề bài viết này giúp chúng ta thực hành một kỹ năng duy nhất đó là chỉnh sửa giao diện của trang web theo ý thích của riêng cá nhân dựa vào công cụ developer tools

có khi mấy thằng chuyên lập trình nó vào đọc bài viết này ối dồi ôi chém gió ít thôi
Muốn trở thành lập trình viên thực sự thì phải học từ đầu những cái cơ bản nhất như HTML, css, javascript, php,, githup...
  • Muốn làm lập trình viên thì  vào visuals studio code
  • Tải phần mềm vscode về mà vọc nhé

không có việc gì khó chỉ cần chú ý một chút là tôi tin theo thời gian ai cũng có thể làm được
từ chỗ dốt nát vô cùng đến mở file paint tôi còn phải hỏi google xem nó ở chỗ nào
ấy thế mà theo thời gian mỗi ngày viết là một ngày ta tiến lên một nấc thang mới tiến bộ hơn.

hóa ra bây giờ tôi mới biết. Dev Chẳng có phép màu nào cả, kỹ năng sẽ hoàn thiện theo thời gian.

thực ra thì tôi ghét cái mã code này như đỉa phải vôi ấy anh em ạ, cho nên chả mấy khi động vào đâu vì nó là lập trình toán học

website của tôi đã hoàn thiện hòm hòm rồi thì chả mấy khi thay đổi theme mà phải động tới code hoa mắt chóng mặt

tóm lại: chỉ cần chúng ta làm chủ được bố cục của một trang blog và biết cách thay đổi theme nâng cao thì tôi tin là anh em sẽ sửa được front-end cho blog thành công

Nếu mà đọc bài viết này mà không chỉnh sửa được như ý thì cũng chả sao cả
người tài giỏi, biết dùng tiền làm công cụ để hoàn thành công việc theo đúng ý của mình.

biết thêm một kỹ năng cũng tốt đấy, thế nhưng đừng quá xa đà vào mấy cái code html java php này làm gì anh em ạ
chúng ta sinh ra mỗi người có một tố chất riêng chả ai giống ai
vì vậy cố gắng tập trung viết content cho tốt là ngon rồi
còn mấy cái dev này cứ nhờ một người thành thạo nó làm cho như thế lại nhàn
Có tiền thì cứ vô tư mà làm phiền thiên hạ
Tùy vào độ khó, thái độ nhiệt tình và thân quen mà ta trả công cho họ
có khi như thế lại nhanh hơn đấy phải không các anh em?

Đăng nhận xét

0 Nhận xét