代码编辑器是Web开发的基础工具,选择合适的编辑器能大大提高开发效率。现代代码编辑器提供了语法高亮、代码补全、调试等功能,让开发工作更加便捷。
东巴文(db-w.cn) 认为:好的编辑器就像战士手中的剑,选择适合自己的编辑器,熟练掌握其功能,能让你的开发效率事半功倍。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码编辑器 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.editor-card {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.editor-card h3 {
color: #667eea;
margin-bottom: 10px;
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.feature-list li:before {
content: "✓ ";
color: #667eea;
font-weight: bold;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>代码编辑器</h1>
<h2>主流编辑器对比</h2>
<div class="editor-card">
<h3>Visual Studio Code</h3>
<p><strong>特点:</strong> 微软开发的免费开源编辑器,功能强大,扩展丰富</p>
<ul class="feature-list">
<li>智能代码补全</li>
<li>内置Git集成</li>
<li>丰富的扩展生态</li>
<li>跨平台支持</li>
<li>内置调试功能</li>
<li>实时预览</li>
</ul>
</div>
<div class="editor-card">
<h3>Sublime Text</h3>
<p><strong>特点:</strong> 轻量级编辑器,启动速度快,界面简洁</p>
<ul class="feature-list">
<li>启动速度快</li>
<li>多光标编辑</li>
<li>强大的搜索功能</li>
<li>自定义快捷键</li>
<li>插件支持</li>
<li>分屏编辑</li>
</ul>
</div>
<div class="editor-card">
<h3>WebStorm</h3>
<p><strong>特点:</strong> JetBrains开发的专业Web开发IDE,功能全面</p>
<ul class="feature-list">
<li>智能代码分析</li>
<li>内置版本控制</li>
<li>强大的重构功能</li>
<li>集成开发环境</li>
<li>数据库工具</li>
<li>专业调试功能</li>
</ul>
</div>
<div class="editor-card">
<h3>Atom</h3>
<p><strong>特点:</strong> GitHub开发的开源编辑器,可定制性强</p>
<ul class="feature-list">
<li>开源免费</li>
<li>高度可定制</li>
<li>丰富的主题</li>
<li>包管理器</li>
<li>跨平台支持</li>
<li>社区活跃</li>
</ul>
</div>
<h2>编辑器对比</h2>
<table class="info-table">
<thead>
<tr>
<th>编辑器</th>
<th>价格</th>
<th>启动速度</th>
<th>扩展性</th>
<th>学习曲线</th>
</tr>
</thead>
<tbody>
<tr>
<td>VS Code</td>
<td>免费</td>
<td>快</td>
<td>极强</td>
<td>低</td>
</tr>
<tr>
<td>Sublime Text</td>
<td>付费</td>
<td>极快</td>
<td>强</td>
<td>低</td>
</tr>
<tr>
<td>WebStorm</td>
<td>付费</td>
<td>中等</td>
<td>中等</td>
<td>中</td>
</tr>
<tr>
<td>Atom</td>
<td>免费</td>
<td>慢</td>
<td>极强</td>
<td>低</td>
</tr>
</tbody>
</table>
<h2>选择建议</h2>
<ul>
<li><strong>初学者:</strong> 推荐VS Code,免费且功能强大,社区活跃</li>
<li><strong>专业开发者:</strong> VS Code或WebStorm,功能全面,效率高</li>
<li><strong>轻量级需求:</strong> Sublime Text,启动快,占用资源少</li>
<li><strong>定制爱好者:</strong> Atom或VS Code,可定制性强</li>
</ul>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>选择编辑器要根据自己的需求和习惯。VS Code是目前最流行的选择,功能强大且免费,适合大多数开发者。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VS Code配置 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.config-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.config-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>VS Code配置</h1>
<h2>基础设置</h2>
<div class="config-demo">
<h3>settings.json配置</h3>
<div class="code-block">
<pre>
{
// 编辑器设置
"editor.fontSize": 14,
"editor.fontFamily": "'Consolas', 'Courier New', monospace",
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.wordWrap": "on",
"editor.lineNumbers": "on",
"editor.renderWhitespace": "all",
"editor.minimap.enabled": true,
"editor.formatOnSave": true,
"editor.formatOnPaste": false,
"editor.autoIndent": "advanced",
"editor.cursorBlinking": "smooth",
"editor.cursorSmoothCaretAnimation": "on",
// 文件设置
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.encoding": "utf8",
"files.eol": "\n",
// 工作台设置
"workbench.colorTheme": "One Dark Pro",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "welcomePage",
"workbench.sideBar.location": "left",
// 终端设置
"terminal.integrated.fontSize": 13,
"terminal.integrated.shell.windows": "PowerShell",
// HTML设置
"html.format.enable": true,
"html.format.wrapLineLength": 120,
"html.format.wrapAttributes": "auto",
"html.format.indentInnerHtml": true,
// CSS设置
"css.validate": true,
"css.lint.compatibleVendorPrefixes": "warning",
"css.lint.vendorPrefix": "warning",
// JavaScript设置
"javascript.validate.enable": true,
"javascript.suggestionActions.enabled": true,
"javascript.updateImportsOnFileMove.enabled": "always",
// Emmet设置
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
// Live Server设置
"liveServer.settings.port": 5500,
"liveServer.settings.root": "/",
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",
// Prettier设置
"prettier.singleQuote": true,
"prettier.semi": true,
"prettier.tabWidth": 4,
"prettier.useTabs": false,
"prettier.printWidth": 100,
"prettier.trailingComma": "es5",
// ESLint设置
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"eslint.run": "onSave",
// Git设置
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.autofetch": true
}
</pre>
</div>
</div>
<h2>推荐扩展</h2>
<div class="config-demo">
<h3>HTML开发扩展</h3>
<div class="code-block">
<pre>
// 必备扩展
1. Live Server - 本地开发服务器
2. Auto Rename Tag - 自动重命名标签
3. HTML CSS Support - CSS智能提示
4. HTML Snippets - HTML代码片段
5. Path Intellisense - 路径智能提示
6. Bracket Pair Colorizer - 括号配对着色
7. Prettier - Code formatter - 代码格式化
8. ESLint - JavaScript代码检查
9. GitLens - Git增强工具
10. Material Icon Theme - 文件图标主题
// 推荐扩展
1. Auto Close Tag - 自动关闭标签
2. CSS Peek - CSS查看器
3. IntelliSense for CSS - CSS智能提示
4. HTMLHint - HTML代码检查
5. Live Share - 实时协作
6. Settings Sync - 设置同步
7. Code Spell Checker - 拼写检查
8. TODO Highlight - TODO高亮
9. Bookmarks - 书签
10. REST Client - HTTP请求工具
</pre>
</div>
</div>
<h2>快捷键配置</h2>
<div class="config-demo">
<h3>keybindings.json配置</h3>
<div class="code-block">
<pre>
[
// 格式化代码
{
"key": "shift+alt+f",
"command": "editor.action.formatDocument",
"when": "editorTextFocus && !editorReadonly"
},
// 保存文件
{
"key": "ctrl+s",
"command": "workbench.action.files.save"
},
// 保存所有文件
{
"key": "ctrl+k s",
"command": "workbench.action.files.saveAll"
},
// 打开设置
{
"key": "ctrl+,",
"command": "workbench.action.openSettings"
},
// 打开命令面板
{
"key": "ctrl+shift+p",
"command": "workbench.action.showCommands"
},
// 快速打开文件
{
"key": "ctrl+p",
"command": "workbench.action.quickOpen"
},
// 切换侧边栏
{
"key": "ctrl+b",
"command": "workbench.action.toggleSidebarVisibility"
},
// 切换终端
{
"key": "ctrl+`",
"command": "workbench.action.terminal.toggleTerminal"
},
// 分屏编辑
{
"key": "ctrl+\\",
"command": "workbench.action.splitEditor"
},
// 注释代码
{
"key": "ctrl+/",
"command": "editor.action.commentLine",
"when": "editorTextFocus && !editorReadonly"
},
// 删除行
{
"key": "ctrl+shift+k",
"command": "editor.action.deleteLines",
"when": "editorTextFocus && !editorReadonly"
},
// 复制行
{
"key": "shift+alt+down",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
// 移动行
{
"key": "alt+down",
"command": "editor.action.moveLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "alt+up",
"command": "editor.action.moveLinesUpAction",
"when": "editorTextFocus && !editorReadonly"
}
]
</pre>
</div>
</div>
<h2>代码片段</h2>
<div class="config-demo">
<h3>HTML代码片段</h3>
<div class="code-block">
<pre>
{
// HTML5模板
"HTML5 Template": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>${1:Document}</title>",
" <link rel=\"stylesheet\" href=\"${2:style.css}\">",
"</head>",
"<body>",
" ${3:内容}",
" <script src=\"${4:script.js}\"></script>",
"</body>",
"</html>"
],
"description": "HTML5模板"
},
// 导航栏
"Navigation Bar": {
"prefix": "nav",
"body": [
"<nav class=\"${1:navigation}\">",
" <ul>",
" <li><a href=\"${2:#}\">${3:首页}</a></li>",
" <li><a href=\"${4:#}\">${5:关于}</a></li>",
" <li><a href=\"${6:#}\">${7:服务}</a></li>",
" <li><a href=\"${8:#}\">${9:联系}</a></li>",
" </ul>",
"</nav>"
],
"description": "导航栏"
},
// 表单
"Form Template": {
"prefix": "form",
"body": [
"<form action=\"${1:#}\" method=\"${2:POST}\" class=\"${3:form}\">",
" <div class=\"form-group\">",
" <label for=\"${4:input}\">${5:标签}</label>",
" <input type=\"${6:text}\" id=\"${4:input}\" name=\"${4:input}\" required>",
" </div>",
" <button type=\"submit\">${7:提交}</button>",
"</form>"
],
"description": "表单模板"
}
}
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>VS Code的强大在于其扩展生态。根据项目需求安装合适的扩展,配置适合自己的快捷键和代码片段,能大幅提升开发效率。
</div>
</div>
</body>
</html>
浏览器开发工具是前端开发的重要利器,掌握开发者工具的使用能帮助快速定位和解决问题,提高开发效率。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浏览器开发工具 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.tool-panel {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.tool-panel h3 {
color: #667eea;
margin-bottom: 10px;
}
.shortcut-list {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
.shortcut-item {
margin: 8px 0;
}
.shortcut-key {
background: #667eea;
padding: 3px 8px;
border-radius: 3px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="container">
<h1>浏览器开发工具</h1>
<h2>开发者工具概述</h2>
<div class="tool-panel">
<h3>打开开发者工具</h3>
<div class="shortcut-list">
<div class="shortcut-item">
<span class="shortcut-key">F12</span> 或
<span class="shortcut-key">Ctrl + Shift + I</span> (Windows/Linux)
</div>
<div class="shortcut-item">
<span class="shortcut-key">Cmd + Option + I</span> (Mac)
</div>
<div class="shortcut-item">
右键 → 检查 (Inspect)
</div>
</div>
</div>
<h2>主要面板</h2>
<div class="tool-panel">
<h3>Elements面板</h3>
<p><strong>功能:</strong> 查看和编辑HTML元素和CSS样式</p>
<ul>
<li><strong>DOM树:</strong> 查看页面HTML结构</li>
<li><strong>样式编辑:</strong> 实时修改CSS样式</li>
<li><strong>计算样式:</strong> 查看最终应用的样式</li>
<li><strong>盒模型:</strong> 可视化元素盒模型</li>
<li><strong>事件监听:</strong> 查看元素绑定的事件</li>
</ul>
</div>
<div class="tool-panel">
<h3>Console面板</h3>
<p><strong>功能:</strong> 执行JavaScript代码和查看日志</p>
<ul>
<li><strong>日志输出:</strong> console.log(), console.error()等</li>
<li><strong>代码执行:</strong> 直接执行JavaScript代码</li>
<li><strong>错误查看:</strong> 查看JavaScript错误</li>
<li><strong>命令历史:</strong> 查看执行过的命令</li>
</ul>
</div>
<div class="tool-panel">
<h3>Network面板</h3>
<p><strong>功能:</strong> 查看网络请求和资源加载</p>
<ul>
<li><strong>请求列表:</strong> 查看所有网络请求</li>
<li><strong>请求详情:</strong> 查看请求头、响应头、响应体</li>
<li><strong>时间分析:</strong> 查看资源加载时间</li>
<li><strong>过滤筛选:</strong> 按类型过滤请求</li>
<li><strong>离线模拟:</strong> 模拟离线状态</li>
</ul>
</div>
<div class="tool-panel">
<h3>Sources面板</h3>
<p><strong>功能:</strong> 查看和调试源代码</p>
<ul>
<li><strong>文件导航:</strong> 查看所有源文件</li>
<li><strong>断点调试:</strong> 设置断点,逐步调试</li>
<li><strong>变量查看:</strong> 查看变量值</li>
<li><strong>调用栈:</strong> 查看函数调用栈</li>
<li><strong>代码编辑:</strong> 实时编辑代码</li>
</ul>
</div>
<div class="tool-panel">
<h3>Application面板</h3>
<p><strong>功能:</strong> 查看应用存储和缓存</p>
<ul>
<li><strong>Storage:</strong> LocalStorage, SessionStorage, Cookies</li>
<li><strong>IndexedDB:</strong> 查看IndexedDB数据库</li>
<li><strong>Cache Storage:</strong> 查看Service Worker缓存</li>
<li><strong>Service Workers:</strong> 管理Service Workers</li>
<li><strong>Manifest:</strong> 查看Web App Manifest</li>
</ul>
</div>
<h2>常用快捷键</h2>
<div class="tool-panel">
<h3>调试快捷键</h3>
<div class="shortcut-list">
<div class="shortcut-item">
<span class="shortcut-key">Ctrl + Shift + C</span> - 选择元素
</div>
<div class="shortcut-item">
<span class="shortcut-key">Ctrl + Shift + J</span> - 打开Console
</div>
<div class="shortcut-item">
<span class="shortcut-key">Ctrl + Shift + M</span> - 切换设备模式
</div>
<div class="shortcut-item">
<span class="shortcut-key">F8</span> 或 <span class="shortcut-key">Ctrl + \\</span> - 暂停脚本执行
</div>
<div class="shortcut-item">
<span class="shortcut-key">F10</span> 或 <span class="shortcut-key">Ctrl + '</span> - 单步跳过
</div>
<div class="shortcut-item">
<span class="shortcut-key">F11</span> 或 <span class="shortcut-key">Ctrl + ;</span> - 单步进入
</div>
<div class="shortcut-item">
<span class="shortcut-key">Shift + F11</span> 或 <span class="shortcut-key">Ctrl + Shift + ;</span> - 单步退出
</div>
</div>
</div>
<h2>调试技巧</h2>
<div class="tool-panel">
<h3>元素调试</h3>
<ul>
<li><strong>强制状态:</strong> 右键元素 → Force state (:hover, :active等)</li>
<li><strong>隐藏元素:</strong> 按 H 键隐藏选中的元素</li>
<li><strong>复制选择器:</strong> 右键 → Copy → Copy selector</li>
<li><strong>复制XPath:</strong> 右键 → Copy → Copy XPath</li>
<li><strong>截图元素:</strong> 右键 → Capture node screenshot</li>
</ul>
</div>
<div class="tool-panel">
<h3>样式调试</h3>
<ul>
<li><strong>颜色选择器:</strong> 点击颜色值打开颜色选择器</li>
<li><strong>数值调整:</strong> 点击数值后按上下键调整</li>
<li><strong>添加类:</strong> 点击.cls添加新类</li>
<li><strong>新建样式规则:</strong> 点击+号新建样式规则</li>
</ul>
</div>
<div class="tool-panel">
<h3>Console技巧</h3>
<div class="shortcut-list">
<div class="shortcut-item">
<code>console.log()</code> - 普通日志
</div>
<div class="shortcut-item">
<code>console.error()</code> - 错误日志
</div>
<div class="shortcut-item">
<code>console.warn()</code> - 警告日志
</div>
<div class="shortcut-item">
<code>console.table()</code> - 表格形式显示数据
</div>
<div class="shortcut-item">
<code>console.group()</code> - 分组日志
</div>
<div class="shortcut-item">
<code>console.time()</code> - 计时
</div>
<div class="shortcut-item">
<code>console.trace()</code> - 堆栈跟踪
</div>
<div class="shortcut-item">
<code>debugger</code> - 代码断点
</div>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>浏览器开发者工具是前端开发的利器。熟练掌握Elements、Console、Network等面板的使用,能快速定位和解决问题,提高开发效率。
</div>
</div>
</body>
</html>
调试是开发过程中必不可少的环节,掌握调试技巧能快速定位和解决问题,提高代码质量。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调试技巧 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.debug-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.debug-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>调试技巧</h1>
<h2>断点调试</h2>
<div class="debug-demo">
<h3>设置断点</h3>
<div class="code-block">
<pre>
// 代码断点
function calculateTotal(price, quantity) {
debugger; // 代码断点
const total = price * quantity;
console.log('Price:', price);
console.log('Quantity:', quantity);
console.log('Total:', total);
return total;
}
// 条件断点
// 在开发者工具中右键行号 → Add conditional breakpoint
// 例如: price > 100
// 事件断点
// Sources面板 → Event Listener Breakpoints
// 选择要监听的事件,如click、load等
</pre>
</div>
</div>
<h2>日志调试</h2>
<div class="debug-demo">
<h3>Console API</h3>
<div class="code-block">
<pre>
// 基本日志
console.log('普通日志');
console.info('信息日志');
console.warn('警告日志');
console.error('错误日志');
// 格式化日志
const user = {
name: '张三',
age: 25,
email: 'zhangsan@example.com'
};
console.log('用户信息:', user);
console.table(user); // 表格形式
// 分组日志
console.group('用户信息');
console.log('姓名:', user.name);
console.log('年龄:', user.age);
console.log('邮箱:', user.email);
console.groupEnd();
// 计时
console.time('数据处理');
// ... 执行代码
console.timeEnd('数据处理');
// 堆栈跟踪
function funcA() {
funcB();
}
function funcB() {
funcC();
}
function funcC() {
console.trace('调用栈');
}
funcA();
// 断言
console.assert(1 === 2, '断言失败:1不等于2');
// 清空控制台
console.clear();
</pre>
</div>
</div>
<h2>性能调试</h2>
<div class="debug-demo">
<h3>Performance面板</h3>
<div class="code-block">
<pre>
// 使用Performance API
performance.mark('start');
// 执行代码
for (let i = 0; i < 1000000; i++) {
// 复杂计算
}
performance.mark('end');
performance.measure('执行时间', 'start', 'end');
const measure = performance.getEntriesByName('执行时间')[0];
console.log(`执行时间: ${measure.duration}ms`);
// 清除标记
performance.clearMarks();
performance.clearMeasures();
</pre>
</div>
</div>
<h2>网络调试</h2>
<div class="debug-demo">
<h3>Network面板技巧</h3>
<div class="code-block">
<pre>
// 模拟慢速网络
// Network面板 → Online → 选择 Slow 3G
// 禁用缓存
// Network面板 → Disable cache
// 查看请求详情
// 点击请求 → Headers / Preview / Response / Timing
// 过滤请求
// Filter框输入: method:POST, type:script, domain:example.com
// 查看请求时间
// Timing标签页查看:
// - Queuing: 排队时间
// - Stalled: 停滞时间
// - DNS Lookup: DNS查询时间
// - Initial connection: 建立连接时间
// - SSL: SSL握手时间
// - Request sent: 请求发送时间
// - Waiting (TTFB): 等待响应时间
// - Content Download: 内容下载时间
// 复制请求
// 右键请求 → Copy → Copy as cURL / Copy as fetch
</pre>
</div>
</div>
<h2>移动端调试</h2>
<div class="debug-demo">
<h3>设备模拟</h3>
<div class="code-block">
<pre>
// 打开设备模式
// Ctrl + Shift + M 或点击设备图标
// 选择设备
// 下拉菜单选择预设设备:
// - iPhone 12 Pro
// - Samsung Galaxy S20
// - iPad Pro
// - 自定义设备
// 网络条件
// 下拉菜单选择网络条件:
// - Online
// - Fast 3G
// - Slow 3G
// - Offline
// 屏幕方向
// 点击旋转图标切换横竖屏
// DPR调整
// 下拉菜单调整设备像素比
// 媒体查询
// 更多选项 → Show media queries
// 显示媒体查询断点
// 尺寸调整
// 拖动边框调整视口尺寸
// 或输入具体宽高值
</pre>
</div>
</div>
<h2>常见问题调试</h2>
<div class="debug-demo">
<h3>布局问题</h3>
<div class="code-block">
<pre>
// 1. 查看盒模型
// Elements面板 → 选中元素 → 查看盒模型图
// 2. 查看计算样式
// Elements面板 → Computed标签页
// 3. 查看元素位置
// Elements面板 → 选中元素 → 页面高亮显示
// 4. 查看滚动容器
// Elements面板 → 滚动容器高亮显示
// 5. 查看Flexbox/Grid布局
// Elements面板 → Layout标签页
// 显示Flexbox和Grid容器
</pre>
</div>
</div>
<div class="debug-demo">
<h3>JavaScript错误</h3>
<div class="code-block">
<pre>
// 1. 查看错误信息
// Console面板显示错误信息和堆栈
// 2. 设置错误断点
// Sources面板 → Pause on exceptions
// 3. 查看变量值
// 鼠标悬停在变量上查看值
// 4. 监视表达式
// Sources面板 → Watch面板 → 添加表达式
// 5. 查看调用栈
// Sources面板 → Call Stack面板
// 6. 查看作用域
// Sources面板 → Scope面板
// 7. 查看闭包
// Scope面板 → Closure
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>调试是开发过程中必不可少的环节。掌握断点调试、日志调试、性能调试等技巧,能快速定位和解决问题,提高代码质量。
</div>
</div>
</body>
</html>
完成本章学习后,请尝试回答以下问题:
选择题: 以下哪个代码编辑器是目前最流行的免费开源编辑器?
填空题: 在VS Code中,格式化代码的快捷键是____。
简答题: 浏览器开发者工具的主要面板有哪些?各自的功能是什么?
实践题: 配置VS Code,安装至少5个HTML开发必备扩展,并创建一个HTML5代码片段。
应用题: 使用浏览器开发者工具调试一个网页,找出并修复至少3个问题。