开发者工具_开发者工具控制台 - CSDN
精华内容
参与话题
  • Chrome的开发者工具详解

    千次阅读 2015-05-19 14:21:17
    Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。...怎样打开Chrome的开发者工具? 直接在页面上点击右键,然后选择审查元

    本文章转siberiawolf0307http://segmentfault.com/a/1190000002439648

    Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie,还可以模拟手机进行调试。自从使用了Chrome,我就离不开它了。
    下面整理一下如何使用Chrome进行调试。

    怎样打开Chrome的开发者工具?

    直接在页面上点击右键,然后选择审查元素:
    审查元素

    或者在Chrome的工具中找到:
    工具中找到

    或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12
    打开的开发者工具就长下面的样子:
    F12

    不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口
    独立窗口

    Elements标签页

    Elements标签页的左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性。
    Elements标签页

    1. Edit as HTML直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。
    2. Copy可以将HTML代码直接复制下来,在拷贝别人网站上面的HTML代码的时候灰常方便,你懂的~~
    3. Delete node删掉一个HTML Node
    4. Break on可以对某个元素进行监听,在JS对元素的属性或者HTML进行修改的时候,直接触发断点,跳转到对改元素进行修改的JS代码处

    Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:
    CSS进行查看与编辑

    1. Style看HTML元素的样式
    2. Computed可以看元素的盒子模型
    3. Properties看到元素具有的方法与属性,比查API手册要方便得多

    Network标签页

    Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求,才会在这里显示的哦。
    Network标签页
    点击左侧某一个具体请求URL,可以看到该请求的详细HTTP请求情况:
    HTTP请求情况
    我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

    1. Headers请求头信息和响应头信息
    2. Preview预览结果,如果是文件可以查看这个文件;如果是图片可以预览这个图片;如果是从服务器返回来的JSON数据,可以查看格式话后的JSON
    3. Response从服务器返回的响应结果
    4. Cookies请求和响应的Cookie
    5. Timing具体的响应时间

    格式化JSON
    字符串JSON

    Sources标签页

    Sources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
    调试面板
    断点设置

    Timeline标签页

    注意这个Timeline的标签页不是指网络请求的时间响应情况,这个Timeline指的JS执行时间、页面元素渲染时间(每个信息都怎么看,我没弄懂..)
    Timeline标签页

    Profiles标签页

    主要是做性能优化的,包括查看CPU执行时间与内存占用(这个也没弄懂)
    Profiles1
    Profiles2

    Audits标签页

    这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)
    Audits1
    点击run按钮,就可以开始分析页面,分析完了就可以看到分析结果了
    Audits2

    Console标签页

    就是Javascript控制台了:
    Console.log
    在这个面板可以查看错误信息、打印调试信息(console.log())、写一些测试脚本,还可以当作Javascript API查看用。
    Console.log

    移动端开发调试

    现在新版chrome弹出控制台后如下图,其中的工具对移动端调试非常方便。
    Console.log
    在控制台中可以直接模拟手机、调整UA、修改网络连接状态
    Console.log

    说明

    官方帮助手册(需要翻墙)

    1. 编辑样式和DOM
    2. javascript 调试
    3. 移动端调试

    截图文字看不清问题

    现在部分截图看不清,请鼠标右键点击“在新标签页中打开图片”。以后会支持预览大图。
    文字看不清

    展开全文
  • 百度开发者工具

    2020-07-30 23:30:03
    百度开发者工具..
  • 不同浏览器上的开发者工具

    千次阅读 2017-11-30 10:47:33
    不同浏览器上的开发者工具 你是否知道每个现代浏览器都有自己的开发者工具? 如果你不知道,那很好。要想在浏览器中找到开发者工具,并不十分容易。因此,我们决定通过这个开发者工具指南来帮助你! Google ...

    不同浏览器上的开发者工具

    你是否知道每个现代浏览器都有自己的开发者工具?

    如果你不知道,那很好。要想在浏览器中找到开发者工具,并不十分容易。因此,我们决定通过这个开发者工具指南来帮助你!

    Google Chrome

    Chrome 开发者工具是 Google Chrome 中内置的网页编辑和调试工具。使用开发者工具迭代、调试和简要介绍站点。要学习更多内容,单击此处|国内 翻译文档

    要打开 Chrome 开发者工具,右键单击任意页面元素,并选择“检查 (Inspect)”,或者打开浏览器窗口右上角的 Chrome 菜单并选择“更多工具 (More Tools)” >“开发者工具 (Developer Tools)”。或者你可以使用快捷方式 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux)。

    Mozilla Firefox

    Firefox 开发者工具让你可以在台式机和手机上检查、编辑及调试 HTML、CSS 和 JavaScript。你也可以下载 Firefox Developer Edition 版的 Firefox,它专为开发者定制,具有最新的 Firefox 功能和开发者试验工具。要学习更多内容,单击此处

    要打开 Firefox 开发者工具,右键单击任意页面 元素并选择“检查元素 (Inspect Element)”,或者打开浏览器窗口右上角的 Firefox 菜单并选择“开发者 (Developer)”。 或者,你可以使用快捷方式 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux)。

    Internet Explorer

    对于 Windows 用户,如果你仍在使用 Internet Explorer 的版本, 则可通过按 F12 来 访问 F12 开发者工具。版本之间的功能各不相同, 但从 Internet Explorer 8 开始,各功能变化不大。下面,我们已经链接到每个版本的文档,但是如果你已经升级到 Microsoft Edge,请查阅下一部分。

    Microsoft Edge

    Microsoft Edge 为 Internet Explorer 中的 F12 开发者工具引入了新的巨大改进。新工具内置于 TypeScript 之中,且始终处于运行状态,所以不需要重新加载。另外,GitHub 上当前提供了 F12 开发者工具文档。要学习更多内容,单击此处

    如同 Internet Explorer,要在 Microsoft Edge 中打开开发者工具,只需按 F12

    Safari

    对于 Mac 用户,Safari 自带有 Web Inspector,这是一个强大的工具,能够轻松地修改、调试和优化网站,以便在两个平台上同时获得最佳的性能和兼容性。要学习更多内容,单击此处

    要访问 Safari 的网页开发工具,请在 Safari 的高级首选项中启用“开发 (Develop)”菜单。启用后,可右键单击任意页面元素并选择“检查元素 (Inspect Element)”以打开 Web 开发工具,或者使用快捷方式 ⌘ + ⌥ + I

    Opera

    Opera 快速、小巧且功能强大,预先包装了一套功能齐全的开发者工具。此工具包名为 Opera Dragonfly,旨在让你的工作变得更加轻松。要学习更多内容,单击此处

    通过按 ⌘ + ⌥ + I (Mac) 或 Ctrl + ⇧ + I (Windows/Linux) 来启动 Opera Dragonfly。或者,你可以通过在页面中右键单击并选择“检查元素 (Inspect Element)”来锁定特定的元素。

    展开全文
  • 浏览器开发者工具基本使用教程

    万次阅读 2018-05-30 16:50:22
    在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。浏览器开发者工具到底是什么?其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具,当然只要你有...



    在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途。

    浏览器开发者工具到底是什么?

    其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具,当然只要你有兴趣想要了解,只要你对这个世界充满这好奇,什么东西你都可以了解。

    开发者工具到底有什么用?

    它的作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript、jQuery)之类的,还可以使用工具查看网页加载过程,获取网页请求(这个过程也叫做抓包),抓包是非常有意思的过程,而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏,也就是功能上的差别,那么这个时候你就找一个最适合自己的浏览器使用就可以,接下来就是介绍我常用的三个浏览器。

    一、谷歌浏览器chrom

    一般在windows系统上浏览器开发者工具打开都是按F12快捷键,但是今天我是用mac进行讲解的。

    屏幕快照 2016-08-13 下午11.01.39

    那么上面的这张图就是打开chrom浏览器工具的方式,也可以通过快捷键打开

    element页面

    上面这张图就是打开chrom开发者工具之后的样子,现在简单的介绍:

    第一个框:是用于屏幕适配的,也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。

    屏幕快照 2016-08-13 下午11.14.56

    上面这张图就是点击之后的效果,用于移动设备屏幕适配的功能

    Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可以看到布局,可以看到用到的样式,还有用到的链接等等。

    console标签:这个就是一个web控制台

    sources标签:这个是显示资源文件的

    sources

    1.该选择框使用来选择资源的,当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
    2.这个地方使用来调试js代码的地方,这个非常重要,看到行号上面有蓝色的标签,这个标签就是断电,当我们需要调试程序的时候打一个断电,然后通过3这个工具栏进行调试,那么调试过程就不详细解释,也就是打一个断电然后刷新页面程序会调到你打断点的地方,然后通过4来查看程序中变量的值什么的。
    3.中的标签,第一个是停止状态的按钮就是表示程序是否停止(在debug时),后面的是程序继续跳过方法,跳过下一个语句,调到上一个语句。

    Network标签:这个就是抓包常用的工具

    屏幕快照 2016-08-13 下午11.33.24

    那么这个页面就是用于抓包的页面,我们需要分析页面的请求,比如模拟登陆什么的都需要去分析程序是怎么在后台执行的,接下来就,我们可以看到Headers(请求消息头) Preview(预览) Response(响应) Timing(求求时间)Cookie这些东西

    最上面还有一个工具栏,有一个红色的圆点静止符号的按钮,那么这两个按钮,当为红色按钮的时候表示当前的请求不被清空(但是这里的请求是不跳转页面的请求,当跳转到新的页面,那么也会请求也会被清空),后面这个按钮就是清空请求的。

    下面还有一行工具栏,这个工具栏主要是用来选择和过滤请求消息的。

    再下面可以看到时间线,这个就是记录一个请求开始到结束的时间。

    注意:当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log,同时让红色按钮显示红色

    TimeLiness标签:这个就是我们上面讲的请求时间

    那么后面的几个标签也不是很常用,我就不做过多的说明,现在简单的了解这些基本的入门使用知识就基本够用,我相信这些功能都用熟之后你也会知道其他的功能的。

    二、火狐浏览器FireFox

    通过谷歌浏览器的认识那么我们就很简单的使用火狐咯,其实在mac上我是非常喜欢火狐的,因为功能是非常的强大。

    现在只讲火狐和谷歌浏览器的区别:

    屏幕快照 2016-08-13 下午11.52.17

    火狐浏览器的打开方式,这里我们选择Web控制台,当然你可以打开没一个试试,试试总是没有错的对吧,我不经意的打开了WebIDE简直就是惊呆我了,这个直接就是一个写前端的神奇没有什么好说的咯。你也可以打开试试,每一个都可以试试,这些功能真的很强大。

    当打开之后,我们会发现,火狐真的给人眼前一亮的赶脚

    屏幕快照 2016-08-13 下午11.54.04

    看吧,是不是有一种眼前一亮的赶脚,反正我是有的(当然了你第一次打开的话坑定和我的不一样了,我这个是设置主题之后的效果,你也可以去设置咯)

    看看,和chrom没有什么不同吧,都是那几个,而且人家是中文的,对一些看到English就发晕的同学简直是不能太有爱

    功能上没什么区别,但是在我抓包的过程中发现,火狐抓包的能力真的强,我自己开始是用谷歌现在我选择使用火狐更多

    那么就简单的介绍不同的地方

    火狐

    大家可以看上图,我觉得这个就是我不用深入研究就能知道的最大区别啦:

    1、看到没有,这里列出的消息头 Cookie 响应什么的一个都不少,而且人家多了参数 安全性
    参数这个就不用多说了,在我们抓包分析的过程中参数绝对是非常重要的内容,所以能够直接给你展示出来,可以给你减少去分析参数的过程,那么安全性呢,不言而喻了吧。

    2、我们再来看,编辑和重发 原始头 能够模拟请求,简直碉堡啦,有没有,喜欢到爆,谷歌当然也可以有,但是好像是要装插件的。

    好啦,还有很多不同,但是我说啦,只要你掌握了上面所讲的这些东西,我相信你去研究其他的功能都会是小菜一碟咯。

    那么我们来看看设置里面给我们提供了那些自定义功能,这个也是非常强大的功能哦

    火狐设置

    当点击图中1按钮(设置按钮)后将出现一个神奇的地方,就是这里面,这里面也有很多功能啦,可以一个一个勾选上去体验吧孩子。

    注意:看到图中2没有,这个勾选上有什么作用,和Chrom中的Preserve log是一个作用,当你请求道要挑传的页面的时候如不勾选上那么你的请求会被清空,勾选上了那么就不会被清空,这样更加有力你分析问题咯。

    三、Safari浏览器

    Safari的开发者工具呢也很不错,但是从功能上我觉得是不能够满足我内心强大欲望的,so,我一般上网用Safari,开发调试用上面两种,上网用Safari真的是方便而且简洁。

    好了简单的放上几张图让大家感受吧:

    屏幕快照 2016-08-14 上午12.18.32

    这个呢就是打开Safari开发者工具的方式,在顶部菜单栏下面开发者标签中打开显示错误控制台就可以看到下面的场景咯

    屏幕快照 2016-08-14 上午12.21.45

    上面是打开网络这个标签的,我们可以看到该有的功能是一个都没少,而且我觉得非常简洁,说真的我如果不是一个开发者,我会爱死这样的一个浏览器,简洁大方,并且用户体验非常好,没有杂七杂八的功能。
    想起一句话:好的产品不是还能不能扩展,而是做到没有办法再精简。

    屏幕快照 2016-08-14 上午12.21.53

    看吧这就是调试代码的地方,功能上没有什么不同,但是感觉很规范,很简洁,很友好。

    如果你是入门,我相信这些已经够啦,当你熟练运用了这些功能之后我相信你自己去研究就非常容易啦

    记录学习的每一步,记录每一次的成长!!!!

    展开全文
  • 微信公众号之开发者工具

    万次阅读 2020-04-06 16:49:32
    一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...

    一、前言

       这次的项目主要是关于微信公众号的一个开发,本人这次分配的模块是后台微信公众号的支付和退款,第一次接触微信公众的项目刚开始一脸懵逼,开发过程中遇到各种坑,所以想自己写一篇详细的关于微信公众号的开发,希望能对小伙伴们有所帮助!在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署到正式环境中测试。

    二、使用方法

    进入到在线接口调试工具页面如下图所示:

    详细介绍:

    1.第一步:选择上图的接口类型为基础支持,输入测试账号分配的appid和secret,点击检测可以获取到AccessToken,如下图所示:

    2.第二步,通过第一步中得到的AccessToken,可以进行其他接口的测试,这里以自定义菜单为例测试。复制第一步中得到的AccessToken到自定义菜单对应的AccessToken位置,然后将事先准备好的菜单复制到body文本框中,然后点击检测,返回OK自定义菜单就设置好了,如下图所示:

    3.第三步,查看自定义菜单,在测试账号管理中找测试二维码,用微信二维码扫描关注测试账号就可以看到自定义菜单了,如下图:

    附自定义菜单格式:

    {
        "button": [
            {
                "name": "便民服务", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "个人中心", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appId=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/PersonalInfo&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "预约挂号", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/li_room&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "费用支付", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/Clinic&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "报告查询", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/report&response_type=code&scope=snsapi_base#wechat_redirect"
                    }, 
                    {
                        "type": "view", 
                        "name": "咨询互动", 
                        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxef3736bdf19a5639&redirect_uri=http://szmbtest.free.ngrok.cc/weixin/dispatch/xie_consultation&response_type=code&scope=snsapi_base#wechat_redirect"
                    }
                ]
            }, 
            {
                "name": "资料下载", 
                "sub_button": [
                    {
                        "type": "view", 
                        "name": "官方网站", 
                         "url": "http://www.szmbzx.com/"
                    }
                ]
            }
        ]
    }

    三、注意事项

    要想使关注的测试账号能真正的访问到后台,需要在测试管理页面中配置一些参数。

    1.接口信息配置和JS接口安全域名配置

               下图中的域名是使用ngrock代理生成的外网可访问的域名,改域名是免费,但不是很稳定经常容易掉线。

    2.网页授权获取用户基本信息配置

       还是在测试账号管理页面中,往下拉找到网页账号对应的网页授权获取用户基本信息,点击右侧修改,然后数据域名,该域名与第一条中涉及到域名相同,如下图:

     

    有兴趣的朋友可以关注下本人的微信公众号:“JAVA菜鸟程序猿”

     

     

     

    展开全文
  • 开发者工具

    2019-07-30 11:24:25
    在使用开发者工具的时。 很多时候。我们只知道点这个,点那个。却不知道开发者工具内提供的功能和按键是什么意思。 今天。我们就来聊一聊 开发者工具面板 开发者工具包括以下面板 红色区域 -- Elements :查找...
  • 前端-chromeF12 谷歌开发者工具详解 Network篇

    万次阅读 多人点赞 2018-02-10 12:31:47
    原文链接:https://segmentfault.com/a/1190000010302235开发者工具初步介绍chrome开发者工具最常用的四个功能模块:Elements:主要用来查看前面界面的html的Dom结构,和修改css的样式。css可以即时修改,即使显示。...
  • 这篇文章主要为刚刚接触前端、javaee、php等内容的萌新设计们,对于我本人也是一个对于开发者工具中Network模块使用的一点心得和总结开发者工具初步介绍chrome开发者工具最常用的四个功能模块:Elements:主要用来...
  • Chrome开发者工具详解

    万次阅读 2018-06-15 10:53:53
    Chrome开发者工具详解(1)-Elements、Console、Sources面板Chrome开发者工具面板面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、...
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...
  • 作者:Linux技术链接:https://www.jianshu.com/p/58ec32eef2d4从人工到自动化,从重复到创新,技术演进的历程中,伴随着开发者工具类产品的发展。阿里巴...
  • 1.登录微信公众号平台 https://mp.weixin.qq.com 1.1选择开发者工具 1.2选择web开发者工具 1.3邀请绑定即可 2.登录微信小程序 https://mp.weixin.qq.com
  • Mac Chrome Safari打开开发者工具快捷键

    万次阅读 2016-06-24 11:17:12
    Mac Chrome开发者工具快捷键: command + option(alt) + i
  • HbuilderX+微信开发者工具配置

    千次阅读 2019-09-18 15:34:24
    一、首先要在HbuilderX中指定微信开发者工具安装目录 ,工具》设置》运行配置 ,设置路径 ok,就可以在Hbuildx中 control + r 运行 微信小程序端了
  • 微信开发者工具查看项目存放路径

    千次阅读 2018-02-10 17:30:22
    鼠标点击红色箭头指向的...
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin
  • 微信web开发者工具不能打开的问题

    万次阅读 2018-06-06 22:05:30
    今天新装的微信开发者工具,安装完成以后就是打不开,点解没有反应,win10 64的系统,各种百度,最后找到解决的方案把这些都关闭了就OK了!!!
  • 1.首先下载web微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 2.安装:点击下一步   点击我接受 选择路径 等待程序安装成功就可以了 运行查看程序是否能...
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。 1、第一步,右键...
  • 问题:  解决:  
1 2 3 4 5 ... 20
收藏数 556,715
精华内容 222,686
关键字:

开发者工具