整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
S是解释型语言，是逐条语句解释执行的，如果错误发生在某个语句块，此语句块以前的语句一般都可以正常执行。这不同于C等编译型语言。
代码调试的重点在于找到错误发生点，然后才能有的放矢。
通常可以使用警告框来提示变量信息。
alert(document.body.innerHTML);
当警告框弹出时，用户将需要单击“确定”来继续。
<div id="demo">
<script>
var arr=[1,2,3,4,5]
document.write(arr[2] + ' ') //3
</script>
</div>需要注意的是是，以下写法会替换整个页面的内容：
<button type="button" onclick="document.write(5 + 6)">试一试</button>
即使是函数调用也是如此。
document.getElementById("demo").innerHTML =""
<h1>JavaScript Array.filter()</h1>
<p>使用通过测试的所有数组元素创建一个新数组。</p>
<p id="demo"></p> //45,25
<script>
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
document.getElementById("demo").innerHTML = over18;
function myFunction(value, index, array) {
return value > 18;
}
</script>
JS的运行环境是浏览器，由浏览器引擎解释执行JS代码，一般来说，浏览器也提供调试器，如chrome按F12即可调出高试器：
<!DOCTYPE html>
<html>
<body>
<h4>我的第一张网页</h4>
<p>使用F12在浏览器（Chrome、IE、Firefox）中激活调试，然后在调试器菜单中选择“控制台”。</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值：
内置的调试器可打开或关闭，强制将错误报告给用户。
通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。
<p id="demo"></p>
<script>
try {
adddlert("欢迎您，亲爱的用户！");
}
catch(err) {
demo.innerHTML = err.message; //adddlert is not defined
}
</script>JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message。
name 设置或返回错误名。
message 设置或返回错误消息（一条字符串）。
debugger停止执行 JavaScript，并调用调试函数（如果可用）。
可以注释掉一些可疑代码来确定错误发生点。
或者考虑逐步增加代码的方法，逐步验证，以避免错误。
8.1 意外使用赋值运算符
如果程序员在 if 语句中意外使用赋值运算符（=）而不是比较运算符（===），JavaScript 程序可能会产生一些无法预料的结果。
8.2 令人困惑的加法和级联
加法用于加数值。
级联（Concatenation）用于加字符串。
在 JavaScript 中，这两种运算均使用相同的 + 运算符。
正因如此，将数字作为数值相加，与将数字作为字符串相加，将产生不同的结果：
var x = 10 + 5; // x 中的结果是 15
var x = 10 + "5"; // x 中的结果是 "105"而加法以外的其它算法运算符可以将字符串进行自动类型转换。
10-"5" // 5
8.3 令人误解的浮点数
JavaScript 中的数字均保存为 64 位的浮点数（Floats），符合IEEE754的标准。
所有编程语言，包括 JavaScript，都存在处理浮点值的困难：
var x = 0.1;
var y = 0.2;
var z = x + y // z＝0.300000000000000048.4 错位的分号
因为一个错误的分号，此代码块无论 x 的值如何都会执行：
if (x == 19);
{
// code block
}在一行的结尾自动关闭语句是默认的 JavaScript 行为。
在 JavaScript 中，用分号来关闭（结束）语句是可选的。
8.5 对象使用命名索引
在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
如果您使用命名索引，那么在访问数组时，JavaScript 会将数组重新定义为标准对象。
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length; // person.length 将返回 0
var y = person[0]; // person[0] 将返回 undefined
y=person["age"]; //ok
y=person.age;//ok
document.getElementById("demo").innerHTML = y
</script>8.6 Undefined 不是 Null
Undefined 的类型是 Undefined，Null的类型是Object。
JavaScript 对象、变量、属性和方法可以是未定义的。
此外，空的 JavaScript 对象的值可以为 null。
在测试非 null 之前，必须先测试未定义：
if (typeof myObj !== "undefined" && myObj !== null)
8.7 JS没有块作用域（与C语言不同）
在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript不会为每个代码块创建新的作用域。</p>
<p>此代码将显示 i（10）的值，即使在 for 循环块之外：</p>
<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i; //10
</script>
</body>
</html>ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。
这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。
for (let i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i; //不能访问-End-
本篇文章开始成哥将带大家一起学习一下前端的基础知识，我们先讲解前端的基础HTML与CSS，这个讲完我们将讲解VUE前端框架，最后我们再讲讲Ant Design的VUE前端框架，从而形成前端一个系列的教程，下面就开始我们今天的内容吧！
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。
使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件"翻译"成可以识别的信息，即现在所见到的网页。HTML 不需要编译，可以直接由浏览器执行，非常方便开发时调试。
我们现在创建一个典型的HTML结构具体如下：
1. <!DOCTYPE html>
2. <html lang="ch">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML实例</title>
6. </head>
7. <body>
8. <h1>我是标题</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上页面中各个标签代表的意思如下：
1）<!DOCTYPE html>是文档声明头，它告诉游览器当前处理的内容是HTML页面
2）html是 HTML 页面的根元素，用于标识HTML内容的开始与结束
3） head是HTML页面的头，包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8，title为文档的标题
4）body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题，p是body内容中定义的段落
我们现在通过游览器打开编写的HTML内容，具体内容如下
在HTML中的内容可以通过以下格式进行内容注释具体如下：
（1）HTML标签
HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签具有如下特点：
1）标签一般是成对出现的 如:<div></div>;也有空标签 如:<br />
2）标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)
3）标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母
标签的示列如下：
标签按照<>的对数可以分为如下两类分别为双标签与单标签，下面我们具体来了解一下这两类标签。
1）双标签
双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下：
1. <标记名></标记名>
常见的双标签有如下几种：
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
5. <h1></h1>
6. <p></p>
7.
8. <!-- 块级元素 -->
9. <div></div>
10. <span></span>
11.
12. <!-- 超链接元素 -->
13. <a></a>
14.
15. <!-- 列表元素 -->
16. <ul></ul> 2）单标签
单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：
1. <标记名/>
常见的单标签有如下几种：
1. <!-- 换行标签 -->
2. <br />
3.
4. <!-- 分隔线标签 -->
5. <hr />
6.
7. <!-- 图片标签 -->
8. <img /> （2）HTML元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，如<p>段落</p>。元素可以进行嵌套具体如下：
1. <div>
2. <h1>我是标题</h1>
3.
4. <div>
5. <p>元素嵌套示列</p>
6. </div>
7.
8. </div> （3）HTML属性
属性为 HTML 元素提供附加信息，可分为全局属性（即所有元素均可使用的属性，如id,class等）和元素属性（部分元素可使用的属性，例如<a href="http://www.baidu.com">搜索</a>），属性通常由属性名="属性值"构成,存在于开始标签中，示列如下:
（4）HTML实体编码
对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码"，如< <> >空格 。
（5）HTML事件
通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色，事件可以分为多类比多鼠标点击、鼠标聚焦等，下面我看看看一个事件编写示列：
（1）h标签
h 标签有六种分别为h1、h2、h3、h4、h5、h6，这六个分别对应六种样式的标题，我们现在来编写这六种h标签，演示代码如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>H1标题</h1>
9. <h2>H2标题</h2>
10. <h3>H3标题</h3>
11. <h4>H4标题</h4>
12. <h5>H5标题</h5>
13. <h6>H6标题</h6>
14. </body>
15. </html> 我们来运行该HTML文件，来看看这六种h标签有什么样式差异，从示列中可以发现h1标签字体最大然后依次减小。
（2）p标签
p 标签是文本标签，现在我们来编写一段含有p标签的html文本，然后运行了看看p标签的样式具体操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>标题一</h4>
10. <p>我是段落1</p>
11.
12. <h4>标题二</h4>
13. <p>我是段落2</p>
14.
15. </body>
16. </html> （3）a标签
a标签是超链接标签，点击a标签可以跳转到其设置的网站，具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <div>
9. <a href="http://www.baidu.com">点我跳转到百度页面</a>
10. </div>
11.
12. <div>
13. <a href="http://www.qq.com">点我跳转到腾讯页面</a>
14. </div>
15.
16. </body>
17. </html> （4）div标签
div标签是一个块级元素，它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子，我们可以为这个盒子设置各种各样属性（如高度、宽度、颜色等），下面我们编写一个div标签并设置其长为300px，宽度为200px，同时给其一个背景颜色，具体如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>
10.
11. </body>
12. </html> （5）列表标签
列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）
1）有序列表ul
有序列表的顺序是有序的，默认情况下会以数字来排列，但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列，我们现在来写一个示列，具体如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 有序列表，以默认方式数字排列 -->
10. <p>有序列表默认方式数字排列</p>
11. <ol>
12. <li>列表1</li>
13. <li>列表2</li>
14. <li>列表3</li>
15. </ol>
16.
17. <!-- 有序列表，以大写字母排列 -->
18. <p>有序列表大写字母排列</p>
19. <ol type="A">
20. <li>列表1</li>
21. <li>列表2</li>
22. <li>列表3</li>
23. </ol>
24.
25. </body>
26. </html> 2）无序列表ol
无序列表的顺序是无序的，不会按照某个值来排序，无序列表中每个列表前默认都有一个实心圆，也可以通过type属性来设置成空心圆或者小方块，无序列表示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>无序列表默认type样式</p>
10. <ul>
11. <li>列表1</li>
12. <li>列表2</li>
13. <li>列表3</li>
14. </ul>
15.
16. <p>无序列表方块样式</p>
17. <ul type="square">
18. <li>列表1</li>
19. <li>列表2</li>
20. <li>列表3</li>
21. </ul>
22.
23. </body>
24. </html> 3）自定义列表dl
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始，其列表内容是以<dd> 开始，自定义列表前面没有任何标识，其具体示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>自定义列表</p>
10. <dl>
11. <dt>东岳</dt>
12. <dd>泰山</dd>
13.
14. <dt>南岳</dt>
15. <dd>衡山</dd>
16.
17. <dt>西岳</dt>
18. <dd>华山</dd>
19.
20. <dt>北岳</dt>
21. <dd>恒山</dd>
22.
23. <dt>中岳</dt>
24. <dd>嵩山</dd>
25. </dl>
26.
27. </body>
28. </html> （6）其它标签
1）换行标签<br/>
在HTML中如果想给内容进行换行可以使用换行标签，具体示列如下：
2）分割线标签<hr/>
<hr/> 标签用于在 HTML创建一条分割线，具体示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基础教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>我是张三</p>
10. <!-- 分割线标签 -->
11. <hr/>
12. <p>我是李四</p>
13. </body>
14. </html> 至此我们《HTML基础教程上篇》就讲完了，下篇内容主要讲解HTML样式、HTML表单、Tabel等，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：
文作者从开发者角度出发，介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。如果你选择 Chrome 作为开发环境，那么你应该知道下面关于它的 11 个使用技巧。
图片来源 Morning Brewon，Unsplash
好了，现在由于某种原因，你最终选择了 Chrome 浏览器作为开发及调试的环境。接下来，打开开发者工具并开始调试代码。
很多时候你可以打开“控制台”面板来检查程序的输出，或者打开“元素”面板来检查 DOM 元素的 CSS 代码。
但是你真的了解 Chrome 开发者工具吗？实际上，它提供了许多强大但很多人未知的功能，可以极大地提高我们的开发效率。
在这里，我将介绍几个最有用的功能，希望能对你有所帮助。
在开始之前，我想介绍一下 Chrome 的命令菜单。命令菜单之于 Chrome，就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。
首先，我们打开 Chrome 开发者工具，然后使用以下快捷键打开命令菜单：
或者我们可以按照下图所示的步骤将其打开：
然后，我们可以转到“命令”面板，在这里我们可以输入一些命令来执行很多强大的功能。
捕获屏幕内容是一个非常常见的功能需求，当然我非常确定在你当前的计算机上已经有了非常方便的截图工具了。但是，你可以完成以下任务吗？
这是两个很普通的要求，但是使用操作系统随附的屏幕截图工具不太容易解决。这个时候，我们可以在 Chrome 使用相关命令来帮助我们完成此要求。
上面两个需求的对应的命令是：
举个例子
现在可以打开任意的网页，例如，Medium 上 JavaScript 的热门文章页面。
https://medium.com/tag/javascript
打开“命令”菜单并执行Screenshot Capture full size screenshot。
然后，我们可以就获得当前页面的完整屏幕截图了。
上面的原始图像实际上非常清晰，只是在这里我上传了压缩图像以节省你的流量。
同样地，如果要截取某个 DOM 元素的屏幕截图，就完全可以使用系统自带的屏幕截图工具，但当窗口不能完全捕获该元素内容时，此时，你可以使用Capture node screenshot命令。
首先，我们在“元素”面板中选择一个元素，然后运行Capture node screenshot命令，如下图所示。
下面是准确的屏幕截图的结果：
我们常常需要在控制台中调试代码。比如你想知道如何在 JavaScript 中反转字符串，然后你在网络上搜索相关信息并找到以下代可行代码。
'abcde'.split('').reverse().join('')没问题，上面的代码确实对字符串进行了翻转。但你还想了解 split()、reverse()、join() 这些方法的作用以及运行他们的中间步骤的结果。因此，现在你想逐步执行上述代码，可能会编写如下内容：
好了，经过上面这些操作，我们确实知道了每个方法运行的返回值，也就了解了各个方法的作用。
但是，这给人的感觉有点多此一举。上面的做法既容易出错，又难以理解。实际上，在控制台中，我们可以使用魔术变量$_引用上一次操作的结果。
$_是一个特殊变量，它的值始终等于控制台中上一次操作的执行结果。它可以让你更加优雅地调试代码。
XHR，即 XMLHttpRequest，是一种创建 AJAX 请求的 JavaScript API 。
在我们的前端项目中，我们经常需要使用 XHR 向后端发出请求来获取数据。如果你想重新发送 XHR 请求，那么该怎么办呢？
对于新手来说，可能会选择刷新页面，但这可能比较麻烦。实际上，我们可以直接在“网络”面板中进行调试。
下面是一个 gif 示例，方便你理解：
从一开始完全加载页面可能需要十秒钟以上的时间。我们有时需要监控页面在不同的时间点相关资源的加载行为。
在 Chrome 开发者工具中，我们可以使用“网络”面板下的Capture Screenshots功能来捕获页面加载时的屏幕截图。
单击每个屏幕截图可以显示相应的当前时间的网络请求状态。这种可视化的演示会让你更好地了解网络请求的详细过程。
你可以将 JavaScript 变量的值复制到其他地方吗？
这似乎是不可能完成的任务，但是在 Chrome 浏览器中，有一个名为copy的函数可以帮助你实现这个功能。
该copy函数不是由 ECMAScript 定义的，而是由 Chrome 浏览器提供的。使用此功能，你可以将 JavaScript 变量的值复制到你的剪贴板中，方便在其他位置使用。
处理网页上的图像的通常有两种方法，一种是通过外部资源链接加载它们，另一种是将图像编码为 Data URI。
Data URL，即前缀为data:协议的 URL，允许内容创建者在文档中嵌入小文件。在被 WHATWG 撤消该名称之前，它们被称为“Data URI”。
将这些小图像编码到 Data URL 并将它们直接嵌入到我们的代码中，可以减少页面需要发出的 HTTP 请求的数量，从而加快页面加载速度。
所以在 Chrome 浏览器中，我们该如何将图像转换为 Data URL 呢？可以参考下面的 gif 图像：
假设我们有一个下面这样的数组对象：
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]这样的数组在控制台中不容易查看阅读。如果数组更长，元素内容很复杂，那么该数据将变得更加难以理解。
幸运的是，Chrome 提供了表格展示功能，可以将数组对象进行列表展示，方便理解。
在很多情况下，该功能非常好用。
有时我们想调整页面上某些 DOM 元素的位置以测试 UI。在“元素”面板中，你可以拖放任何 HTML 元素来更改其在页面中的显示位置：
上面的展示中，在“元素”面板中将某个 div 的位置拖动到其他位置，它在网页上的展示位置就会同步更改。
>$0是另一个魔术变量，它会引用“元素”面板中当前选定的 DOM 元素。<是另一个魔术变量，它会引用“元素”面板中当前选定的 dom="">
CSS 伪类不仅可以让你将样式应用于文档树内容，还可以将其应用于外部元素，例如导航器的历史记录（例如:visited），其内容的状态（ 例如某些表单元素的:checked），或鼠标的位置（例如:hover，它可以让你知道当前鼠标是否在某个元素内容之上）。
我们可能为一个元素编写多个 CSS 伪类，并且为了方便我们对这些样式进行测试，我们可以直接在“元素”面板中选择触发或关闭这些样式。
下面有一个测试网页：
我们在浏览器中将其打开，然后通过“元素”面板对 CSS 样式进行调试。
在调试 CSS 样式时，我们通常需要隐藏一个元素。如果选择元素并按下键盘上的H键，我们就可以快速隐藏该元素。
此操作实际上增加了visibility: hidden !important;样式到对应的元素上面。
如果要想在控制台中快速获取某个 DOM 元素的引用，可以执行以下操作：
以上就是我想要介绍的 Chrome 开发者工具的高级用法，希望可以帮助到你。
作者介绍：
bitfish，Medium 平台社区编辑，爱好阅读、写作和编程。
原文链接：
https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674
*请认真填写需求信息，我们会在24小时内与您取得联系。
