大家好,今天小编来为大家解答以下的问题，关于谷歌浏览器调试 变量，谷歌浏览器调试 变量设置这个很多人还不知道，现在让我们一起来看看吧！

本文目录

1. 谷歌页面调试工具debug怎么用
2. 如何在移动设备上调试html5开发的网页
3. css 变量哪些浏览器支持
4. 浏览器插件修改变量
5. 浏览器中自带的环境变量怎么修改
6. chrome 如何调试js
7. 怎么调试chrome断点

一、谷歌页面调试工具debug怎么用

googlechrome浏览器不仅性能出色，对web标准的支持是非常优异的。其调试开发也比较方便（自动识别debugger断点、支持动态设置断点、可以查看参数和本地变量、可以单步执行等）。开发人员——>调试JavaScript——>打开JavaScript调试页（快捷键好像是ctrl+shift+l）。输入h（或者help）可以查看各种调试选项。如果已经在js代码中设置了断点（debugger关键字），则保持JavaScript调试器启动（打开）状态，再刷新待调试页面，就可以自动识别debugger关键字声明的断点，用户可以输入各种调试命令。这时候可以输入h，查看新的调试命令，比如args--查看函数参数，l（或者locals）--查看函数内部本地变量，n（或者next）等。感兴趣的可以看看其调试器源码，也是使用JavaScript实现的。可以把它扩展成像firebug那样强大的东东。至少这个调试器是浏览器内置的，不用担心插件兼容性。实现firebug那些consoleapi才是关键。

二、如何在移动设备上调试html5开发的网页

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。

2.1先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

2.2再在电脑上打开Safari点击【Develop】菜单，就会看到如下图所示（点击查看大图）：

2.3点击2.2中的网站名就会在电脑上打开Safari的控制台，如下图（点击查看大图）：

此时你可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（点击查看大图）：

三、css 变量哪些浏览器支持

目前从Can I use上获取的信息显示除了 Edge外主流浏览器的最新版都已经支持这个特性了，随后微软最新确认，EdgeHTML 15.15061中已经增加了对CSS自定义属性的支持！

CSS变量：也称作“自定义属性”；CSS自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

四、浏览器插件修改变量

1、您想问的是浏览器插件修改变量怎么改吗？在断点行时，在右边Watch里输入a=‘123’就行了。

2、在调试到指定的断点行时，直接在右边Watch里输入a=‘123’就行，那么后边使用到a变量时，就是123了。

3、浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。

五、浏览器中自带的环境变量怎么修改

要修改浏览器中自带的环境变量，可以按照以下步骤进行操作：

1.打开浏览器设置，找到高级设置页面

2.查找“环境变量”选项，点击“编辑系统环境变量”

3.找到“环境变量”选项卡，可以看到“系统变量”和“用户变量”

4.选择需要修改的变量，在变量的“值”中修改相应的数值

5.修改完成后，需要重启浏览器才能生效

需要注意的是，修改环境变量需要谨慎操作，如果修改错误可能会导致系统出现问题，因此在修改之前请慎重考虑。

六、chrome 如何调试js

使用的工具：谷歌浏览器、测试的网站；

1、f12打开开发者工具，控制台介绍：

Elements：页面元素，可以进行编辑，保存后实时查看页面效果；

Network：查看js模拟的http请求，例如下图中修改购物车中商品数量，可以实时的看到请求地址，直接上图。

2、点击请求地址，会把请求的头信息和响应信息等数据展示出来，此处非常便捷，展示样式比firebug更直观，直接上图，可以点击查看头信息，preview，响应信息，cookie，timeline对我们有用的。注意，preview是此处模拟http请求的发送数据，直接预览出来了。

3、Sources：次功能是js页面调试中最突出的功能，上图。

功能介绍：左侧sources目录可以展开，查看加载本页面所调用的资源，如js，css，php。此处先介绍断点调试，可以顺序的看到程序的执行过车，勾选右侧的Any XHR按钮，上图。

4、一步一步执行，如添加数量的时候，可以看到右侧的call stock进程，可以看到此处出发了js中changePrice()函数，在此处我们可以进行逻辑分析了。或则在代码行处单击设置断点，英文选项是add breakpoints，单击右击都可以，最是好用，上图。

5、可以查看你设置的所有断点，右侧展开，如图，断点调试用的比较多，当然了还可以在js里直接写代码，查看实时数据变化，查看要注意ctrl+s保存操作。

6、Timeline：次功能是查看页面性能，页面渲染速度的，一般是用不到的。测试人员可以查看，图中展示一些性能参数供参考，上图。

Profile：次功能主要测试加载文件速度参考，可以在此处上传我们的文件供测试用。点击 Load上传即可，一般用不着。

备注：Console：此功能是模拟js控制台，直接写代码，查看结果。高级功能使用时开启断点，查看变量的变化过程。还可以条用函数。

七、怎么调试chrome断点

js前端必不可少的需要用到浏览器调试，而chrome是前端开发者们较常用的浏览器，而且chrome断点调试技能的掌握必不可少。那么怎么调试chrome断点？小编和大家说说具体操作方法。

chrome87正式版64位是Google最新发布的在windowsx64系统上使用的谷歌浏览器，chrome87是一个大版本更新，在性能上做了前所有未的优化。通过对不活动标签的冻结，降低内存资源的占用，从而降低对系统的负担，因此也提升了电脑的续航能力。下面为大家分享谷歌浏览器87稳定版64位离线安装包官方下载地址，有需要的用户可以来下载安装。

1、首先我们在需要调试的界面按F12打开开发者工具。

2、打开成功可以看到上图所示的弹出工具。本经验是如何调试，所以直接进入正题，点击Sources标签。

3、左边Page标签下显示的就是项目目录。

4、假设对Main.ts进行调试，需要在调试代码行前，点击行数字位置所在，出现如图所示的蓝色标志，表示定位成功。

5、接下来运行页面，运行到脚本所在就会在断点的位置，出现暂停，将鼠标移到指定变量，就会显示出相关数据。

6、配合右边watch跟调用堆栈的使用，可以跳出该函数，查看上一步函数等等。通过查看这些数据得到调试结果。

以上教大家一招调试chrome断点的小技能，掌握此方法能帮助大家更好的使用浏览器，希望对大家有所帮助！

OK，关于谷歌浏览器调试 变量和谷歌浏览器调试 变量设置的内容到此结束了，希望对大家有所帮助。