作为前端程序员不可避免的会和浏览器打交道，所以要对浏览器的各个属性的作用进行了解，方便开发及调试，这里以谷歌浏览器为例进行简单的介绍。一是巩固对浏览器属性的认识，二是方便大家的学习。

  1. 首先打开谷歌浏览器按F12查看控制台属性。

2.比较常用的是可以选择不同的设备参数，设备显示的分辨率大小及显示的百分比。

在设备选择的底部可以编辑，可以自定义需要的设备型号及自定义尺寸分辨率尺寸进行保留。

3.可以进行鼠标的选中。点击这个箭头可以进行代码及区域的选中，比较适合调整一些比较难的细节样式及排查问题。

4.调整样式，定位问题，也可以在style中定位自己的类名直接写自己想要的样式，然后复制到代码中。

5.控制台可以查看代码报错，根据报错定位问题，也可以在控制台输入一些指令，输出一些变量及数组，在代码中可以使用console.log()进行打印输出。

6.这个源文件指的是可以看到自己的源代码文件，我们可以在这里找到自己的源代码文件然后双击左侧进行debugger操作或者在代码中写debugger这个单词。这个比较方便定位一些比较难得bug,排查问题，直达程序运行到哪里，有没有取到值等等，相比与console.log,alert优势还是很大的，可以配合使用，比较常用的快捷键，F8放行，F10下一步，F11进入某个方法，最后的那个可以清除bug的标记。

7.这个application可以查看一些缓存，比较我代码中存的session，cookie等，方便下一个页面或者流程取值。直接在即将进入的页面提前打开，然后进入页面查看自己存的值和对象是不是自己想要的。这个在一些银行或者大型的内网企业十分常用，因为他们在网关这个层面里面的东西几乎都是私密的。

8.这个network可以查看一些接口信息，比如前后端交互可以查看接口的入参和返回值，如果入参有，没有返回值和正确的响应码都可以把问题抛给后端，可以查看请求及返回时长，一些性能检测，前后端的入参和返回值、请求头、响应体、响应码等都可以在这里查哦

9.后面的这几个不一一介绍了，用的不是很多，有兴趣的可以研究一下。

好啦，时候不早了，还得改bug,本期内容就分享到这里,我们下期见！

浏览器各个属性的作用相关推荐

  1. html中属性的作用,html的标签中 unselectable=on 属性的作用

    在IE浏览器中,当input获得焦点时,点击有unselectable="on"属性的标签时,不会触发onblur事件. 加上该属性的元素不能被选中. < !DOCTYPE ...

  2. 浏览器对象模型bom的作用是什么？

    浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...

  3. 解决新版chrome浏览器SameSite属性cookie拦截问题

    解决新版chrome浏览器SameSite属性cookie拦截问题 问题现象: 由于升级了新版chrome浏览器后,发现系统正常iframe嵌套.AJAX,Image从以前的跨站会发送三方 Cooki ...

  4. html中outline属性,css的outline属性的作用是什么

    css的outline属性的作用是什么 发布时间:2020-05-06 11:47:34 来源:亿速云 阅读:280 作者:小新 css的outline属性的作用是什么?相信有很多人都不太了解,今天小 ...

  5. html当中的属性cellspacing,table标签cellspacing属性的作用及使用方法

    在html中制作表格,需要用到table标签,而该标签中的cellspacing属性可设置单元格间距,下面我们就一起学习一下cellspacing属性的作用及使用方法. cellspacing属性指定 ...

  6. 7. img 的 srcset 属性的作用？

    7. img 的 srcset 属性的作用? 响应式页面中经常用到根据屏幕密度设置不同的图片.这时就用到了 img 标签的 srcset 属性.srcset 属性用于设置不同屏幕密度下, img 会自 ...

  7. @RequestMapping注解中的produces属性的作用

    关于@RequestMapping注解 这个注解的使用方法相信大家都知道,可以写在类或者方法上,指定请求的url路径,最近在使用的时候发现了一些原来没有注意的地方,特此记录 记录一:一个注解可以设置多 ...

  8. html中cellpadding属性作用,table标签cellpadding属性的作用及使用方法

    在html中制作表格,需要用到table标签,而该标签中的cellpadding属性可设置单元格边距大小,下面我们就一起学习一下cellpadding属性的作用及使用方法. cellpadding属性 ...

  9. CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...

    前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...

最新文章

  1. 打开指定大小的新窗口
  2. Shell中的read语句
  3. [vue-element] ElementUI使用表格组件时有遇到过问题吗？
  4. 第2章 数字之魅——快速寻找满足条件的两个数
  5. 贺：MSN-.NET 技术交流群荣登群首页
  6. python爬取豆瓣电影信息数据
  7. 有哪些激光雷达SLAM算法？
  8. css中margin属性的探究
  9. 一张图概括淘宝直播背后的前端技术
  10. 免流服务器稳定吗,什么是免流服务器
  11. Lumion 11学会像真正的专业人士一样渲染
  12. 你根本就不会使用Notes！
  13. 基于长短期记忆网络(LSTM)的意见领袖对舆论风向的研究、网络暴力研究、LSTM情感分分类、意见领袖的影响力、神经网络实战、数据分析实战、蔡徐坤潘长江网络暴力事件、数据可视化实战、舆情研究
  14. @ConfigurationProperties(prefix = )异常报错解决方案：
  15. ipad未能与itunes连接到服务器,为什么无法连接到iTunes Store？iPhone/iPad解决方法
  16. 去除百度推广等广告的插件神器
  17. 产品设计需求分析研究
  18. TRIZ系列-创新原理-14~15-曲面化原理和动态性原理
  19. Scratch（三）：跳一跳
  20. 解决json string转object，value值存在英语双引号，无法解析问题

热门文章

  1. 【渝粤教育】电大中专学前儿童健康教育_1作业 题库
  2. 【渝粤题库】广东开放大学 秘书实务 形成性考核
  3. python中int函数的用法浅析_Python中int()函数的用法浅析
  4. 微信朋友圈删除后服务器还有吗,删了的朋友圈还可以找回来吗
  5. 连不上机器判断机器状态_KUKA机器人为什么KPP故障联不上，断电重启hou报RDC连接连接不上...
  6. 信号与系统 chapter12 卷积及其性质
  7. 八数码深度优先搜索_深度优先搜索和广度优先搜索
  8. 设置文字多行显示溢出显示省略号
  9. 数学图形(1.43)贝壳形曲线与鱼形曲线
  10. Why you have so few friends?