有没有一种方法,使一个HTTP请求使用Chrome开发工具,而不使用插件像海报?
当前回答
最短的方法是:
await (await fetch('<URL>')).json()
其他回答
如果你的网页有jquery在你的页面,那么你可以做它写在chrome开发者控制台:
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);
这是jquery的方法!
扩展@dhfsk答案
这是我的工作流程
在Chrome DevTools中,右键单击您想要操作> Copy作为cURL的请求 开放的邮递员 单击左上角的导入,然后粘贴原始文本
由于Chrome(和大多数其他浏览器)支持Fetch API,现在很容易从devtools控制台发出HTTP请求。
获取一个JSON文件:
fetch(“https://jsonplaceholder.typicode.com/posts/1”) .then(res => res.json()) 不要犹豫(console.log)
或者POST一个新资源:
fetch (https://jsonplaceholder.typicode.com/posts, { 方法:“文章”, 身体:JSON.stringify ({ 标题:“foo”, 身体:“酒吧”, 用户标识:1 }), 标题:{ “内容类型”:“application / json;charset = utf - 8 ' } }) .then(res => res.json()) 不要犹豫(console.log)
Chrome Devtools实际上也支持新的async/await语法(即使await通常只能在async函数中使用):
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())
请注意,您的请求将遵循同源策略,就像浏览器中的任何其他http请求一样,因此要么避免跨源请求,要么确保服务器设置了允许您的请求的CORS-headers。
使用插件(旧答案)
作为之前发布的建议的补充,我发现Chrome的邮递员插件工作得非常好。它允许你设置头和URL参数,使用HTTP认证,保存你经常执行的请求等等。
你可以在Firefox的检查器中编辑/重新发送请求,而不需要使用任何第三方,如下所示:
在Firefox中按F12打开检查器▶进入“网络”页签 找到你的API请求并点击它,这样'Headers'部分就会出现在右边(你可以在顶部的栏中过滤) “标题”选项卡带有一个重发按钮,在这里你可以重发或编辑和重发
截图
我很幸运地结合了上面的两个答案。在Chrome中导航到站点,然后在DevTools的Network选项卡上找到请求。右键单击请求并复制,但是复制为fetch而不是cURL。您可以直接将获取代码粘贴到DevTools控制台并编辑它,而不是使用命令行。
推荐文章
- 在Window上执行'btoa'失败:要编码的字符串包含Latin1范围之外的字符。
- Chrome中的请求监控
- 在Chrome 55中,防止显示HTML 5视频的下载按钮
- 在Chrome浏览器下加载资源失败
- Chrome: console.log, console.debug不工作
- 访问控制台和扩展的后台开发工具
- 将Chrome中的console.log保存为文件
- 清除javascript控制台在谷歌Chrome
- Safari和Chrome桌面浏览器无法自动播放视频
- Chrome:网站使用HSTS。网络错误……这个页面稍后可能会工作
- 什么是“升级-不安全-请求”HTTP报头?
- 如何验证一个XPath表达式在Chrome开发工具或Firefox的Firebug?
- 如何删除所有断点在谷歌Chrome一步?
- 我能让chrome-devtools搜索所有的JS源代码吗?
- 编辑和重放XHR chrome/firefox等?