网页开发常用的调试手段（如何使用firefox进行网页js调试）

本文目录

• 如何使用firefox进行网页js调试
• 如何在网页中调试JavaScript
• 如何使用 F12 开发人员工具调试网页
• 如果程序运行出现错误,常用的调试手段有
• 哪位大师讲讲代码调试都有哪些手段
• wkwebview和UIWebView调试技巧
• 使用ES6做web开发时，有哪些不错的调试手段

如何使用firefox进行网页js调试

1、首先使用Firefox火狐浏览器打开需要调试页面，也可以在开发工具设置火狐浏览器来打开：

2、在打开的Firefox浏览器中按F12键，接着就会打开“开发者工具”了：

3、此时选择“调试器”选项，然后选择需要调试的JS文件，接着就可以在需要调试的位置加入断点进行调试：

4、按F11或者F10单步调试JS，这里F11和F10的区别是F11调试，单步执行进入调用的其它函数；而F10调试单步执行，是不进入调用的其它函数的。当然也可以单机页面上相应的按钮进行调试。以上就是用Firefox调试网页的过程：

如何在网页中调试JavaScript

如何使用 F12 开发人员工具调试网页

F12 开发人员工具是一套按需采用的工具，内建于 Windows Internet Explorer 9 的每次安装之中。网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。
F12的存在要求程序开发人员重要的数据不能写在HTML页面中，要写在一般处理程序或者后台中，不然很容易被用户知道比如密码之类的。对WEP开发人员有利的地方就是可以参照别人网站的布局样式等来构思自己的网站。因为F12可以看到网站的布局、样式、js等代码哦！
使用“HTML”选项卡
“HTML”选项卡视图在由内存中的 Windows Internet Explorer 9
呈现的树视图中显示你的网页的动态标记。它反映打开 F12 时的 DOM，如果有任何更改，则需要刷新。
你可以使用鼠标或键盘直接在树视图中导航，以及查看特性和更改值。
若要跳转到网页上的特定元素，请按 Ctrl+B，或单击“单击选择元素” 按钮。在网页上，当你将鼠标悬停在元素上方时将突出显示相应的元素。单击某个元素时，将在 HTML 视图中突出显示 DOM 树中对应的节点。
在“HTML”选项卡中选择一个元素时，可使用“视图”》“源”菜单在你的视图中筛选出按照元素关联的 CSS 样式或仅按照元素本身选择的元素。
“带有样式的元素源”按钮仅在新窗口中显示选定元素的 HTML 源及其内容，以及适用于它的 CSS。这有助于只关注选定元素的源文件。必须首先使用“HTML”选项卡视图选择 DOM 树的主体内的某个 HTML 元素，然后才可以运行此命令。若要选择某个元素，可单击“单击选择元素”按钮，或在 DOM 树中单击某个元素。
当你使用“单击选择元素”时，首先刷新视图是个不错的主意。
若要展开或折叠某个元素的属性，请单击用加号 (+ ) 或减号 (-) 标记的框。HTML 和 CSS 视图中的所有元素都是可的，并且操作会立即生效。通过单击元素名称旁边的复选框，可以打开或关闭样式规则和特性。
查看动态 HTML 代码
大多数网站使用动态代码。客户端脚本通常用于生成用户可以看到的呈现的 HTML。静态 HTML
代码的数量通常很少，仅用于在页面上启动操作。由于 F12 工具将显示呈现在浏览器中的 HTML 和 CSS 代码，而不是显示严格的 HTML
源，因此查找错误更容易一些。
“HTML”选项卡显示 DOM 的当前状态，而不会自动跟踪更改。如果你更改了某个值或特性，但它没有立即显示，请在“HTML”选项卡中按 F5 刷新视图。
更改值和添加特性
F12 工具允许你更改几乎任何特性或属性的值。从“HTML”选项卡内，从 DOM 树中选择一个元素或使用“单击选择元素”按钮选择一个元素。在属性视图（右窗格）中，单击一个值以突出显示并更改它。
例如，在 Internet Explorer 9 中打开如何使用 CSS3 添加圆角中的 CSS 示例页面并且按 F12 可打开该工具。单击“单击选择元素”按钮 ，然后单击栗色的 Now in stock at Fourth Coffee 标题。 在属性窗格中，单击 "h3" 选择器下的颜色特性。 键入一个新的颜色名称或值，如 blue，然后按 Enter。标题的颜色将立即更改。
要添加特性，请右键单击“HTML”或“CSS”选项卡的左窗格中的元素，然后单击上下文菜单中的“添加属性”。你需要知道该特性的格式（如 "background-color:"）和正确值。
若要删除某个特性（你添加的特性或现有特性），请在右窗格视图中单击该特性，然后按 Delete 键。对于原始页中的特性，可通过刷新网页恢复它们。添加的特性需要重新应用。
如果你只希望在某个会话期间临时关闭某个特性，则在“HTML”或“CSS”选项卡的右窗格中清除该特性旁边的复选框。
“HTML”选项卡视图和工具
在左窗格树视图中选择一个元素时，你可以在右侧查看和更改所选元素及其子元素的样式、框模型布局和特性。 你所做的更改不是永久的，当你刷新或打开另一个页面时这些更改会丢失。但是，你可以通过单击“保存”按钮来保存你的 HTML 代码。
当你查看应用于“样式”和“跟踪样式”选项卡中所选元素的多个 CSS 规则时，将根据 CSS
规范，基于这些规则的专一性来显示它们。列表页首的规则将第一个应用到所选元素，而底部的规则是当前定义所选元素的样式属性的规则。这些规则的值是可
的，方法为：单击某个值，键入新值，然后按
"Enter"。更改会立即在网页上显示。这两个属性类型中的信息是相同的。但在“跟踪样式”属性类型中，相同的信息按照属性（在其下面显示规则）分组。
这些属性按字母顺序列出，并基于专一性再次对规则排序。
样式 显示你在树视图中选择的元素的规则和样式。它按规则进行组织，并包含继承的特性和重写的特性。
跟踪样式 显示与样式相同的信息，但是按属性而不是规则分组。
布局 显示所选元素的框模型。通过单击图表中的相应值，可更改“布局”视图中的任意值。“布局”选项卡对可缩放矢量图形 (SVG) 元素禁用。
特性 显示选定元素的特性，如 ID。可以添加或删除特性
右键单击“HTML”选项卡上的菜单
如前面所述，可在“HTML”选项卡的左窗格中右键单击一个元素。下面是你可以在“HTML”选项卡中使用的选项。
菜单项
作用
添加特性 向标记或元素中添加新的特性。
复制 将标记和特性复制到剪贴板中。
复制 InnerHTML 将元素的 InnerHTML 内容（子文本、元素和特性）复制到剪贴板。
复制 OuterHTML 将元素的 OuterHTML 内容（子文本、元素和特性）复制到剪贴板。
如果在“HTML”选项卡中单击某个元素的子节点，如 "h3" 标记的文本元素，则可能无法获得所有选项。如果你未看到所需的选项，则转到父元素并重试。
检查 CSS 规则
“CSS”选项卡显示你的样式表之间的相互影响。此选项卡对于使用多个样式表的网站很有用。若要在样式表之间切换，可使用样式表选择器。当你选择某
个样式表时，左窗格中将显示规则及其相关样式属性。默认情况下，此按钮显示在网页中引用的第一个样式表。如果有多个样式表正在网页上使用，则单击下拉列表
以选择其他样式表。
“CSS”选项卡上的快捷菜单选项
当你右键单击“CSS”选项卡时，快捷菜单将会提供比“HTML”选项卡更多的选项。启用的选项是上下文相关的，并取决于你在“CSS”选项卡中单击的位置。
菜单项
作用
右键单击的位置
添加特性 向标记或元素中添加新的特性。 在规则或特性（任何元素）上。
添加规则 添加选择器、声明或样式。 在白色区域中，而不是在现有元素上。
后加规则 在当前规则之后添加选择器或规则。 在任何元素上。
前加规则 在当前规则之前添加选择器或规则。 在任何元素上。
删除特性。 删除选定的特性。 在任何特性上。
删除规则 删除选定的规则和所有相关的特性。 在任何规则或选择器上。
在“CSS”选项卡中更改数字 CSS 值
CSS 属性的值可以像 F12 工具中的几乎任何其他属性一样进行更改。通过单击属性值并键入新值，可以更改 CSS 属性。在“CSS”选项卡中，还可使用向上键和向下键增加或减小数值。
搜索和保存更改
像 F12 工具中的其余选项卡一样，你可以使用“搜索”框在“HTML”和“CSS”选项卡中搜索特定标记、属性、特性或值。单击“搜索”按钮时，将突出显示搜索关键字的所有实例，并且窗格会滚动到显示第一个匹配项。
如果存在多个匹配项，则可使用“下一个”和“上一个”按钮向前和向后滚动。
你所做的更改（例如，调整框模型或添加特性）不是永久的。当你在浏览器中重新加载页面或导航到其他网页时，你所做的任何更改都会丢失。若要保存对 HTML/CSS 文件的本地副本的更改，请单击左窗格上的“保存”按钮。

如果程序运行出现错误,常用的调试手段有

网页有错误，可能是病毒造成的，也可能是浏览器的原因造成网页有错误，还有可能就是自身网页的问题造成网页错误
解决办法
1、打开浏览器，点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERNET选项→常规页面→删除cookies→删除文件→钩选删除所有脱机内容→确定→设置使用的磁盘空间为：8MB或以下(我自己使用1MB)→确定→清除历史纪录→网页保存在历史记录中的天数：3以下→应用确定（我自己使用的设置是0天）。
2、还原浏览器高级设置默认值：工具→INTERNET选项→高级→还原默认设置。
3、恢复默认浏览器的方法“工具”→Internet选项→程序→最下面有个“检查Internet Explorer是否为默认的浏览器”把前面的钩选上,确定。
4、设置主页：“工具”→Internet选项→常规→可以更改主页地址→键入你喜欢的常用网址→应用。
5、如果浏览器中毒就使用金山毒霸系统修复选择系统清理选项，点击立即清理选择安全百宝箱中系统修复，即可解决网页上有错误解问题
如果是手机建议使用免费金山手机卫士,清理你的 手机病毒和垃圾再打开网页

哪位大师讲讲代码调试都有哪些手段

调试程序bug的方法很多，比如最基础的加断点，单步执行等，另外还可以借助一些其他功能，比如调用堆栈，可以看到出错时调用的那个函数，内存窗口，查看内存，监视窗口可以方便的查看各个变量的值等。

wkwebview和UIWebView调试技巧

        在进行iOS加载网页开发过程中，碰到某个界面有问题需要陪着web开发人员进行调试测试，这是一个非常揪心的问题。所以必须掌握safari对webview进行调试的技巧。

1、打开模拟器（真机）的开发者模式

【设置】-》【Safari】-》【高级】-》【Web检查器】打开

2、打开Mac上Safari的开发者模式

【Safari】-》【偏好设置】-》【高级】-》【在菜单栏中显示“开发”菜单】勾选

3、mac电脑有xcode的时候，使用xcode运行程序到模拟器／iphone。（注意iphone不能锁屏）

如果mac电脑没有xcode的时候，把mac和手机通过数据线连接，在手机上打开需要调试的软件。注意iphone不能锁屏）

自动弹出下图：

但是这还没有看到网页源码，我们需要

【开发】-》【xxx的iphone】-》【Title】勾选  如下图：

然后弹出如下图：

看到上面的图你就熟悉了吧，web人员开发web时候通过浏览器调试时候，都是用的这个界面，交给web开发人员，他就可以搞定一切了。

使用ES6做web开发时，有哪些不错的调试手段

Source map，非常准确的信息文件，里面储存着位置信息。换句话来说，转换后的代码的每一个位置，所对应的转换前的位置。
所以有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这很方便给开发者找出错误的位置。