热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

注意事项和debug调试chrome浏览器1

注意事项和debug调试chrome浏览器--1,Go语言社区,Golang程序员人脉社

注意事项:登录时每次获取信息都会进入拦截器,权限的判断设置。

chorme的调试方法快捷键如下:

Console()

  • Ctrl + L : 清除控制台消息
  • Enter: 执行代码或者命令

Debugger(调试面板)

  • F8  or  Ctrl + : 暂停/继续
  • F10  or  Ctrl + ': 单步执行
  • F11  or Ctrl +;: 单步进入

  • Shift + F11  or Ctrl + Shift+;: 单步退出
  • Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)
  • Ctrl +Shift+E: 被选中代码在控制台中打印出console信息(非常实用)
  • Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
  • Ctrl + B: 打断点/取消断点(很实用)


Timeline Panel(时间轴面板)




一. 先来认识一下这些按钮


先来看这张图最上头的一行是一个功能菜单,每一个菜单都有它相应的功能和使用方法,依次从左往右来看 

1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态


2.设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择


可选择的适配


3.Elements 功能标签页:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息,下图我们可以看到当我鼠标选择id 为lg_tar的div元素时,右侧的css样式对应的会展示出此id 的样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效, 灰色的element.style样式同样可以进行添加和书写,唯一的区别是,在这里添加的样式是添加到了该元素内部,实现方式即:该div元素的style属性,这个页面的功能很强大,在我们做了相关的页面后,修改样式是一块很重要的工作,细微的差距都需要调整,但是不可能说做到每修改一点即编译一遍代码,再刷新浏览器查看效果,这样很低效,一次性在浏览器中修改之后,再到代码中进行修改





  • 盒模型信息

同时,当我们浏览网站看到某些特别炫酷的效果和难做的样式时候,打开这个功能,我们即可看到别人是如何实现的,学会它这知识就是你的了,仔细钻研也会有意想不到的收获


4.Console控制台:用于打印和输出相关的命令信息,其实console控制台除了我们熟知的报错,打印console.log信息外,还有很多相关的功能,下面简单介绍几个:

a: 一些对页面数据的指令操作,比如打断点正好执行到获取的数据上,由于数据都是层层嵌套的对象,这个时候查看里面的key/value不是很方便,即可用这个指令开查看,obj的json string 格式的key/value,我们对于数据里面有哪些字段和属性即可一目了然


其他功能

b: 除了console.log还有其他相关的指令可用


console也有相关的API

5.Sources js资源页面:这个页面内我们可以找到当然浏览器页面中的js 源文件,方便我们查看和调试,在我还没有走出校园时候,我经常看一些大站的js代码,那时候其实基本都看不懂,但是最起码可以看看人家的代码风格,人家的命名方式,所有的代码都是压缩之后的代码,我们可以点击下面的{}大括号按钮将代码转成可读格式

Sources Panel 的左侧分别是 Sources 和 Content scripts和Snippets


  • 对应的源代码



  • 格式化后的代码

关于打断点调试的内容,下面介绍,先来说一些,其他平时基本没人用但是很有用的小点,比如当我们想不起某个方法的具体使用时候,会打开控制台随意写一些测试代码,或者想测试一下刚刚写的方法是否会出现期待的样子,但是控制台一打回车本想换行但是却执行刚写的半截代码,所以推荐使用Sources下面的左侧的Sinppets代码片段按钮,这时候点击创建一个新的片段文件,写完测试代码后把鼠标放在新建文件上run,再结合控制台查看相关信息(新建了一个名叫:app.js的片段代码,在你的项目环境页面内,该片段可执行项目内的方法)



  • 自己书写的片段

Content scripts 是 Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这些文件也是嵌入在页面中的资源,这类文件可以读写和操作我们的资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们的项目还没有相关的扩展文件,所以啥也看不到,平时也不需要关心这块

无结果

6.Network 网络请求标签页:可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看


以上我选择了All,就会把该页面所有资源文件请求下来,如果只选择XHR 异步请求资源,则我们可以分析相关的请求信息


  • 请求的相关信息

打开一个Ajax异步请求,可以看到它的请求头信息,是一个POST请求,参数有哪些,还可以预览它的返回的结果数据,这些数据的使用和查看有利于我们很好的和后端工程师们联调数据,也方便我们前端更直观的分析数据


  • 预览请求的数据

7.Timeline标签页可以显示JS执行时间、页面元素渲染时间,不做过多介绍


8.Profiles标签页可以查看CPU执行时间与内存占用,不做过多介绍


9.Resources标签页会列出所有的资源,以及HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除 不做过多介绍


10.Security标签页 可以告诉你这个网站的安全性,查看有效的证书等


11.Audits标签页 可以帮你分析页面性能,有助于优化前端页面,分析后得到的报告


  • 分析结果


二.Sources资源页面的断点调试

1.如何调试:

调试js代码,肯定是我们常用的功能,那么如何打断点,找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点

2.断点与 js代码修改

看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,同时我们可以使用右侧的功能键进行调试,右侧最上面一排分别是:暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。下面是各种具体的功能区


  • 在代码中打断点


在当前的代码执行区域,在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效,这样就免去了再到代码中去书写,再刷新回看了


临时修改


3.快速进入调试的方法

当我们的代码执行到某个程序块方法处,这个方法上可能你并没有设置相关的断点,此时你可以F11进入此程序块,但是往往我们的项目都是经过很多源代码封装好的方法,有时候进入后,会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块,此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处


4.调试的功能区域

每一个功能区,都有它相关的左右,先来看一张图,它都有哪些功能

Call Stack调用栈:当断点执行到某一程序块处停下来后,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列,Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出,我们最先走了toggleTab这个方法,然后走到了一个更新对象的方法上,当前调用在哪里,箭头会帮你指向哪里,同时我们可以点击,调用栈列表上的任意一处,即可回头再去看看代码

但是若你想从新从某个调用方法出执行,可以右键Restart Frame, 断点就会跳到此处开头重新执行,Scope 中的变量值也会依据代码从新更改,这样就可以回退来从新调试,错过的调试也可以回过头来反复查看

Breakpoints关于断点:所有当前js的断点都会展示在这个区域,你可以点击按钮用来“去掉/加上”此处断点,也可以点击下方的代码表达式,调到相应的程序代码处,来查看

XHR Breakpoints

在XHR Breakpoints处,点击右侧的+号,可以添加请求的URL,一旦 XHR 调用触发时就会在 request.send() 的地方中断

DOM Breakpoints:

可以给你的DOM元素设置断点,有时候真的需要监听和查看某个元素的变化情况,赋值情况,但是我们并是不太关心哪一段代码对它做的修改,只想看看它的变化情况,那么可以给它来个监听事件,这个时候DOM Breakpoints中会如图

当要给DOM添加断点的时候,会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来

Event listener Breakpoints 

最后Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 Javascript 代码时就会自动中断


三.Post man你值得拥有的网络请求神器

在我们的开发过程中,后端的接口都是由发起AJAX请求而获取到的相关数据,但是很多情况是我们的业务还没有做到那块时,后端的同学接口都已经准备好了,但是为了便于后期的工作,将接口请求的数据模拟访问,然后对接口联调很重要,也很方便,因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看,这时候可以安装一个post man网络请求插件,在谷歌应用商店下载,需要翻墙

该扩展程序使用非常简单,功能同时也非常强大,输入你的请求,选择好请求的method,需要请求参数的挨个填好,send之后,就可以看到返回的数据,这个小工具很利于我们的开发


前后台数据的交互。

function loadTree() {
$.post(basePath + "/login/getMenu", function(data) {
var menulist = [];
$.each(data, function(i, item) {
menulist.push({
id: item.id,
text: item.menu_name,
attributes: basePath + item.menu_url, 
parent_id: item.parent_id,
iconCls: item.icon
});
});

for(var i = 0; i var children = menulist[i].children || [];
for(var j = 0; j if(menulist[j].parent_id == menulist[i].id) {
children.push(menulist[j]);
}
}
menulist[i].children = children;
}

var treeData = [];
$.each(menulist, function(i, item) {
if(item.parent_id == 0) {
treeData.push(item);
}
});
$("#menuTree").tree({
data: treeData,
onBeforeSelect: treeBeforeSelect, 
onSelect: treeSelect
});
});

}


login=================getMenu遍历展示出左边和组件结合展示右边。列表展示出来了。

menulist,大多数关联listPage界面,一部分关联list界面,还有为空的界面,应该是存储时存入的界面。

其中parent——id为0的是一级目录,代码生成时会有规定,需要研究权限部分。

  1. 0:{id12text"小说采集"attributes"/tspace/17/listPage"parent_id9iconCls"glyphicon-cd", …}
  2. 1:{id2text"在线表单"attributes"/tspaceHead/list"parent_id1iconCls"glyphicon-cloud", …}
  3. 2:{id6text"角色管理"attributes"/tspace/8/listPage"parent_id5iconCls"glyphicon-user", …}
  4. 3:{id10text"客户管理"attributes"/tspace/15/listPage"parent_id9iconCls"glyphicon-th-list", …}
  5. 4:{id9text"内容管理"attributes"null"parent_id0iconCls"glyphicon-search", …}
  6. 5:{id11text"大盘数据"attributes"/tspace/16/listPage"parent_id9iconCls"glyphicon-flag", …}
  7. 6:{id7text"系统用户"attributes"/tspace/12/listPage"parent_id5iconCls"glyphicon-king", …}
  8. 7:{id15text"定时任务"attributes"/task/listPage"parent_id1iconCls"glyphicon-tasks", …}
  9. 8:{id14text"图片管理"attributes"/tspace/18/listPage"parent_id9iconCls"glyphicon-picture", …}
  10. 9:{id5text"用户管理"attributes"null"parent_id0iconCls"glyphicon-user", …}
  11. 10:{id3text"菜单管理"attributes"/menu/list"parent_id1iconCls"glyphicon-menu-hamburger", …}
  12. 11:{id1text"系统管理"attributes"null"parent_id0iconCls"glyphicon-cog", …}
  13. 12:{id4text"字典管理"attributes"/tspace/7/listPage"parent_id1iconCls"glyphicon-book", …}
  14. 13:{id13text"操作日志"attributes"/oplog/listPage"parent_id1iconCls"glyphicon-time", …}
  15. length:14
  16. __proto__:Array(0)
  17. $.post(basePath + "/login/getMenu", function(data) {
    var menulist = [];
    $.each(data, function(i, item) {
    menulist.push({
    id: item.id,
    text: item.menu_name,
    attributes: basePath + item.menu_url,
    parent_id: item.

推荐阅读
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 树莓派Linux基础(一):查看文件系统的命令行操作
    本文介绍了在树莓派上通过SSH服务使用命令行查看文件系统的操作,包括cd命令用于变更目录、pwd命令用于显示当前目录位置、ls命令用于显示文件和目录列表。详细讲解了这些命令的使用方法和注意事项。 ... [详细]
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • Android源码深入理解JNI技术的概述和应用
    本文介绍了Android源码中的JNI技术,包括概述和应用。JNI是Java Native Interface的缩写,是一种技术,可以实现Java程序调用Native语言写的函数,以及Native程序调用Java层的函数。在Android平台上,JNI充当了连接Java世界和Native世界的桥梁。本文通过分析Android源码中的相关文件和位置,深入探讨了JNI技术在Android开发中的重要性和应用场景。 ... [详细]
  • 本文讨论了Kotlin中扩展函数的一些惯用用法以及其合理性。作者认为在某些情况下,定义扩展函数没有意义,但官方的编码约定支持这种方式。文章还介绍了在类之外定义扩展函数的具体用法,并讨论了避免使用扩展函数的边缘情况。作者提出了对于扩展函数的合理性的质疑,并给出了自己的反驳。最后,文章强调了在编写Kotlin代码时可以自由地使用扩展函数的重要性。 ... [详细]
  • Java和JavaScript是什么关系?java跟javaScript都是编程语言,只是java跟javaScript没有什么太大关系,一个是脚本语言(前端语言),一个是面向对象 ... [详细]
  • 本文整理了Java面试中常见的问题及相关概念的解析,包括HashMap中为什么重写equals还要重写hashcode、map的分类和常见情况、final关键字的用法、Synchronized和lock的区别、volatile的介绍、Syncronized锁的作用、构造函数和构造函数重载的概念、方法覆盖和方法重载的区别、反射获取和设置对象私有字段的值的方法、通过反射创建对象的方式以及内部类的详解。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • JavaSE笔试题-接口、抽象类、多态等问题解答
    本文解答了JavaSE笔试题中关于接口、抽象类、多态等问题。包括Math类的取整数方法、接口是否可继承、抽象类是否可实现接口、抽象类是否可继承具体类、抽象类中是否可以有静态main方法等问题。同时介绍了面向对象的特征,以及Java中实现多态的机制。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 本文介绍了使用PHP实现断点续传乱序合并文件的方法和源码。由于网络原因,文件需要分割成多个部分发送,因此无法按顺序接收。文章中提供了merge2.php的源码,通过使用shuffle函数打乱文件读取顺序,实现了乱序合并文件的功能。同时,还介绍了filesize、glob、unlink、fopen等相关函数的使用。阅读本文可以了解如何使用PHP实现断点续传乱序合并文件的具体步骤。 ... [详细]
  • eclipse学习(第三章:ssh中的Hibernate)——11.Hibernate的缓存(2级缓存,get和load)
    本文介绍了eclipse学习中的第三章内容,主要讲解了ssh中的Hibernate的缓存,包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ... [详细]
  • 基于事件驱动的并发编程及其消息通信机制的同步与异步、阻塞与非阻塞、IO模型的分类
    本文介绍了基于事件驱动的并发编程中的消息通信机制,包括同步和异步的概念及其区别,阻塞和非阻塞的状态,以及IO模型的分类。同步阻塞IO、同步非阻塞IO、异步阻塞IO和异步非阻塞IO等不同的IO模型被详细解释。这些概念和模型对于理解并发编程中的消息通信和IO操作具有重要意义。 ... [详细]
author-avatar
拍友2602882883
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有