🚀01 giờ học cách sử dụng Developer Console

Nếu chỉ có 1 giờ để học cách sử dụng Developer Console (trong Chrome, Edge, Brave...), thì đây là lộ trình cấp tốc và thực chiến, đủ để:

✅ Kiểm tra lỗi
✅ Thử nghiệm code JavaScript
✅ Lấy dữ liệu từ DOM
✅ Giả lập thay đổi giao diện

🚀 LỘ TRÌNH 1 GIỜ SỬ DỤNG CONSOLE

🧱 BƯỚC 1: MỞ CONSOLE (1 phút)

  • Cách mở nhanh:

    • Chuột phải → Inspect → Chọn tab Console

    • Hoặc dùng phím tắt:

      • Windows/Linux: Ctrl + Shift + I rồi Ctrl + ~

      • macOS: Cmd + Option + I

🔍 BƯỚC 2: ĐỌC & GHI LOG (5 phút)

Hành động Câu lệnh
Ghi log ra console console.log("Hello, Tiến sĩ M!");
Cảnh báo console.warn("Cẩn thận!")
Báo lỗi console.error("Đây là lỗi")
In ra object/table console.table(document.links)

👉 Mẹo: Dùng console.clear() để xóa màn hình console.

🌐 BƯỚC 3: TRUY CẬP DOM & LẤY DỮ LIỆU (10 phút)

Mục tiêu Câu lệnh
Lấy 1 phần tử document.querySelector('h1')
Lấy nhiều phần tử document.querySelectorAll('div.card')
Lấy text document.querySelector('h1').innerText
Lấy HTML document.querySelector('h1').innerHTML
Đổi nội dung document.querySelector('h1').innerText = 'Xin chào!'

🧠 Có thể thử trực tiếp ngay trong trang web thật để test giao diện.

🎨 BƯỚC 4: THAY ĐỔI GIAO DIỆN TRỰC TIẾP (5 phút)


let box = document.querySelector('.box');
box.style.backgroundColor = 'darkred';
box.style.fontSize = '20px';

✅ Thay đổi này chỉ hiển thị tạm thời, tải lại trang là mất.

🧪 BƯỚC 5: THỬ CODE NGAY TRONG CONSOLE (10 phút)

Ví dụ: Đếm số ký tự đang có trên toàn trang:

document.body.innerText.length

Tô đỏ tất cả chữ IN HOA:


document.body.innerHTML = document.body.innerHTML.replace(
  /\b[A-Z]{2,}\b/g,
  match => `${match}`
);

🪄 BƯỚC 6: THỦ THUẬT VÀ MẸO HAY (5 phút)

Mẹo Mô tả
$0, $1 Truy cập nhanh phần tử vừa click trong tab Elements
dir() Xem chi tiết object
copy() Copy nội dung vào clipboard: copy(document.title)
_ Biến chứa kết quả gần nhất

🧩 BƯỚC 7: THỬ MỘT VÍ DỤ THỰC CHIẾN (10 phút)

Giả sử bạn muốn:

  • Tô đậm tất cả đoạn <p> chứa từ "cảnh báo":


document.querySelectorAll('p').forEach(p => {
  if (p.innerText.includes('cảnh báo')) {
    p.style.fontWeight = 'bold';
    p.style.color = 'crimson';
  }
});
    
["CẢNH BÁO", "NGUY HIỂM", "WARNING", "DANGER"].forEach(k => {
   document.body.innerHTML = document.body.innerHTML.replace(
      new RegExp(`\\b(${k})\\b`, "gi"),
      `$1`
   );
});

✅ KẾT THÚC: BẢNG TỔNG HỢP LỆNH HAY DÙNG

Lệnh Chức năng
console.log() In thông tin
document.querySelector() Lấy 1 phần tử
document.querySelectorAll() Lấy nhiều phần tử
element.innerText Lấy/chỉnh nội dung
element.style Đổi style inline
$0 → .style Sửa phần tử đang chọn trong Elements
copy() Sao chép nội dung

👉 Nếu Tiến sĩ M cần bản PDF cheat sheet hoặc template thực hành trên website mẫu, tôi có thể tạo riêng. Cứ nói nhé!

🎯 Tips cuối cùng: Trong nhiều tình huống lập trình web thực chiến, Developer Console chính là vũ khí bí mật để debug, test script, và lấy thông tin từ DOM hoặc API nội bộ.

🧠 Bạn chỉ cần 1 giờ để làm chủ Developer Console – nhưng có thể tiết kiệm hàng trăm giờ debug sau này!

🎨 [ 🤖 Made by AI ] – Dev Console for Web Wizards


Vấn đề paste code vào Console bị chặn, nhảy dòng sai, hoặc không chạy đúng là chuyện rất thường gặp – kể cả với developer chuyên nghiệp!

Dưới đây là toàn bộ cách xử lý dứt điểm khi dán code vào Console trên trình duyệt:

🚫 ❗ VẤN ĐỀ KHI DÁN CODE VÀO CONSOLE

❌ Lỗi phổ biến:

  1. Code không thực thi, bị giữ lại sau khi paste

  2. Tự động ngắt dòng (Enter) mà không chạy

  3. Paste nhiều dòng nhưng nó chạy từng dòng riêng biệt

✅ ✅ CÁCH GIẢI QUYẾT CHUYÊN NGHIỆP

✅ Cách 1: Dán toàn bộ nhưng chưa Enter – nhấn Shift + Enter để xuống dòng

  • Dán xong KHÔNG nhấn Enter ngay!

  • Dùng Shift + Enter để xuống dòng mà không thực thi

  • Sau khi xong hết → mới nhấn Enter cuối cùng

✅ Cách 2: Bọc toàn bộ code bằng khối { ... } hoặc hàm (() => { ... })()

Ví dụ thường lỗi khi paste:


let x = 10;
console.log(x);

Giải pháp đúng:


(() => {
  let x = 10;
  console.log(x);
})();

📌 Điều này buộc console hiểu đoạn code là 01 khối duy nhất, không chạy lẻ dòng.

✅ Cách 3: Dán code vào tab “Snippets” để chạy như file JS mini

Đây là cách chuyên nghiệp nhiều dev dùng thay vì Console tab!

Cách làm:

  1. Mở DevTools → Chuyển sang tab Sources

  2. Chọn Snippets (góc trái) → New snippet

  3. Dán toàn bộ code vào đó

  4. Click chuột phải → Run (hoặc Ctrl + Enter)

⏱️ Có thể debug từng dòng bằng breakpoint luôn!

✅ Cách 4: Dán vào Console và kết thúc bằng void 0; hoặc ;

Khi code có function, return, hoặc await dễ gây lỗi nếu không kết thúc rõ ràng.

Ví dụ fix:


const run = () => {
  console.log("Running...");
};
run();
void 0;

🔒 BONUS – Chrome/Edge chặn paste?

Trong 01 số trang web, console bị khóa (ví dụ Facebook, Google...) để tránh dán mã độc:

👉 Cách vượt qua:

  1. Mở DevTools trước, rồi dán trực tiếp vào Snippet (như trên)

  2. Hoặc bật tính năng:
    chrome://flags/#enable-devtools-experiments → bật lên để unlock một số quyền paste nâng cao

✅ Checklist cho Tiến sĩ M khi dán code vào Console:

✅ Dán khối lớn? ➜ Bọc {} hoặc dùng IIFE (() => { ... })()
✅ Code dài nhiều dòng? ➜ Dán vào Snippets
✅ Dán vào console nhưng không chạy? ➜ Đừng nhấn Enter sớm!
✅ Muốn chạy từ từ từng dòng? ➜ Dán xong dùng Shift + Enter để viết tiếp

📎 Mẫu paste an toàn:


(() => {
  const elems = document.querySelectorAll('p');
  elems.forEach(p => {
    if (p.innerText.includes("AI")) {
      p.style.background = "yellow";
    }
  });
})();

🧪 [ 🤖 Made by AI ] • No more paste fails. Only smooth scripts from now.


Dưới đây là tổng quan chuẩn xác về các trình duyệt mà developer chuyên nghiệp sử dụng để làm việc với DevTools / Developer Console, cùng lý do chọn lựa:

🧠 1. Google Chrome – Lựa chọn số 1 của đa số Developer

🔧 Ưu điểm nổi bật:

  • DevTools cực kỳ mạnh mẽ, cập nhật liên tục theo chuẩn mới nhất của W3C

  • Tích hợp Performance, Lighthouse, Recorder, Application cực chi tiết

  • Có thể gắn breakpoint trực tiếp, sửa JS, sửa CSS như IDE mini

  • DevTools có hỗ trợ Snippets như mini-code editor

🔄 Nhiều dev xài thêm bản Chrome Canary để test tính năng DevTools mới nhất.

🧪 2. Microsoft Edge (Chromium) – Đáng gờm không kém

🌟 Vì sao Edge được nhiều Dev chọn:

  • Dựa trên nhân Chromium, nên DevTools tương tự Chrome (giao diện gần như giống nhau)

  • Sử dụng ít RAM hơn Chrome (dễ test với máy yếu)

  • Có thêm tab "3D View" độc quyền giúp xem cấu trúc DOM như... chồng lớp

  • Hỗ trợ trực tiếp các tiện ích debug mạng nội bộ tốt hơn trên Windows

🔐 Edge còn tối ưu cho kiểm tra bảo mật & certificate trong môi trường doanh nghiệp.

🧭 3. Firefox Developer Edition – Dành cho Dev frontend cầu toàn

🦊 Lý do các frontend Dev yêu thích Firefox Dev Edition:

  • DevTools nhẹ, chính xác, kiểm soát CSS Grid, Flexbox, font cực tốt

  • Có tab Accessibility, Fonts, Animations, Layout chuyên sâu

  • Hiển thị rõ computed style, fallback font, cascade CSS

🔥 Rất thích hợp để debug CSS nâng cao, tối ưu UI/UX pixel-perfect.

👨‍💻 4. Safari (macOS) – Dành cho iOS/macOS Dev

🍎 Nếu dev trên Apple ecosystem:

  • Safari là bắt buộc khi cần test WebKit hoặc progressive web apps cho iOS

  • DevTools nhẹ, đủ chức năng nhưng ít mở rộng so với Chrome/Firefox

💡 TÓM TẮT CHỌN LỰA DỰA THEO MỤC TIÊU

Mục tiêu Trình duyệt khuyên dùng
Debug toàn diện, phổ thông nhất Google Chrome
Tối ưu RAM, tích hợp tốt Windows Microsoft Edge
Debug giao diện, CSS, animation Firefox Developer Edition
Test Safari/iOS Safari
Test tính năng Dev mới nhất Chrome Canary

✅ Khuyến nghị chuyên nghiệp:

🔁 Dùng Chrome làm chính, kết hợp Firefox để test UI nâng cao, và Edge để kiểm tra compatibility + RAM.

📦 Nếu cần bộ tiện ích mở rộng Chrome dành cho lập trình viên frontend/backend, tôi có thể gửi list curated top plugin luôn.

🌐 ✨ Made by AI — Optimized for Dev Mastery in Every Browser

Tuyệt vời! Dưới đây là bộ tiện ích mở rộng Chrome được frontend & backend developer chuyên nghiệp dùng hằng ngày – chọn lọc kỹ lưỡng, giúp làm việc nhanh hơn – gọn hơn – chính xác hơn.

🔧 1. Frontend Dev Extensions

🧩 Tiện ích 📝 Chức năng chính
🎨 ColorZilla Lấy mã màu từ trang web, có eyedropper
🧭 WhatFont Hover để biết font đang dùng trên trang
📦 Wappalyzer Xem công nghệ đang dùng (React, Laravel, nginx...)
💡 Web Developer Toolbar kiểm tra, chỉnh CSS/disable JS cực tiện
🧰 CSS Peeper Inspect giao diện đẹp, friendly hơn DevTools
🏗️ Responsive Viewer Test nhiều độ phân giải cùng lúc
🔍 PerfectPixel Overlay ảnh thiết kế để canh pixel UI siêu chính xác
🧼 Clear Cache Xóa cache nhanh mà không cần vào Settings

🛠️ 2. Backend Dev Extensions

🧩 Tiện ích 📝 Mô tả
📬 Postman Interceptor Bắt cookie/session của trình duyệt → dùng trong Postman
🔗 Requestly Fake request, đổi URL/headers/response (debug API)
🛠️ ModHeader Thêm/sửa request headers cực dễ (token, CORS, v.v.)
🧪 Talend API Tester Gửi request API như Postman nhưng chạy ngay trên trình duyệt
🧠 JSON Viewer Pro Hiển thị JSON đẹp + có collapse, search
🧵 GraphQL Playground Dành cho dev API GraphQL, format và test query nhanh
📡 Live Server Web Extension Dùng kèm với VSCode để live reload trực tiếp
🐞 Sentry DevTools Nếu bạn dùng Sentry để bắt bug, extension này tích hợp rất tốt để debug live error

🔥 3. Debug, hiệu suất, bảo mật

Tiện ích Mục đích
📈 Lighthouse Audit hiệu suất, SEO, accessibility (do Google phát triển)
👮‍♂️ CORS Unblock Bỏ chặn CORS khi dev API frontend-local
🧩 DevTools Theme Tùy chỉnh giao diện DevTools, giúp code dịu mắt hơn

🪄 4. Bonus – Productivity Tools for Devs

Tiện ích Mục đích
⏰ Tab Wrangler Tự đóng tab không dùng sau X phút (cho dev hay quên)
📂 Session Buddy Lưu lại toàn bộ tab đang mở thành phiên làm việc
🗂️ Octotree Tree-view cho GitHub repo – duyệt code nhanh gọn
🔄 JSON Formatter Auto format mọi JSON trong trình duyệt cực dễ đọc

📦 Tổng kết: Combo nên cài ngay

👨‍🎨 Frontend:

  • WhatFont + ColorZilla + PerfectPixel + Wappalyzer

🧑‍💻 Backend:

  • Postman Interceptor + ModHeader + Requestly + JSON Viewer

🧠 Fullstack/Hiệu suất:

  • Lighthouse + Web Developer + CORS Unblock + Octotree

👉 Tất cả các tiện ích đều có trên Chrome Web Store. Tôi có thể gửi link download trực tiếp nếu cần.

🎯 Bộ công cụ này sẽ giúp lập trình như… thần gió! Mọi thứ kiểm tra, phân tích, can thiệp DOM, inspect API đều nhanh chóng chỉ vài click.

🚀 [ 🤖 Made by AI ] – Tools curated for true code warriors!

Google Account Video Purchases 230/2 Hai Bà Trưng, Phường Tân Định, Quận 1, Hồ Chí Minh, Việt Nam

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

🌈 Tự Động Highlight Code Trong Blogger

Phần style pre code { white-space: pre-wrap; word-break: break-word; } .code-wrapper { position: relative; } .copy-button { position: absolute; top: 8px; right: 8px; background: #444; color: #fff; border: none; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; cursor: pointer; opacity: 0.7; z-index: 9; } .copy-button:hover { opacity: 1; } Chèn trước thẻ đóng head Code nhiều dòng hay 01 dòng xài giống nhau: const msg = "Xin chào Tiến sĩ M!"; console.log(msg); Code 01 dòng: document.querySelector() Thẻ nào quá phức tạp thì xài như sau: < pre class = "language-js" data-keep-markup >   < code >     Nội dung...   </ code > </ pre > Chèn trước thẻ đóng body < b : if cond = ...
Đọc thêm

🧭CRUD CHUẨN LARAVEL

Errors log: Cài  Laravel  trên host nhưng k phù hợp  php  version Dùng lệnh  artisan  trong  Terminal  nhưng chưa đứng trong thư mục chứa source  Laravel Lỗi  ABCController not found  khi chạy artisan -> do thiếu khai báo namespace ở đầu file web.php Dưới đây là 👉 LỘ TRÌNH 3 NGÀY – CRUD CHUẨN LARAVEL Thiết kế cho người đã có nền tảng lập trình , học để làm thật , không lan man. 🧭 MỤC TIÊU SAU 3 NGÀY ✔ Hiểu chuẩn luồng Laravel ✔ Tự tay xây CRUD hoàn chỉnh ✔ Code đọc được – mở rộng được – không bừa ✔ Sẵn sàng làm app nội bộ / dashboard / CMS 📅 NGÀY 1 – NỀN TẢNG & CRUD CƠ BẢN (80%) ⏱️ ~2–3 giờ 🎯 Mục tiêu ngày 1 Hiểu luồng MVC Làm CRUD chạy được Không cần đẹp – chỉ cần đúng 🧩 1️⃣ Tạo project CRUD mẫu Ví dụ: Post (id, title, content, status) php artisan make:model Post -mcr ➡️ Tạo: Model: app/Models/Post.php Migration Controller resource 🧱 2️⃣ Migration – Tạo bảng Gõ đoạn code sau để tạo bảng trong file databa...
Đọc thêm