A Chrome Dev-tools Extension for Debugging GraphQL Network Requests

graphql-network

Chrome Devtool that provides a "network"-style tab for GraphQL requests to allow developers to debug more easily.

Get it here

Why?

GraphQL is fantastic but if you're using GraphQL you've probably bumped into how horrible it is to monitor requests via the network tab:

GraphQL network allows you to actually monitor and debug network requests again, just like the good old days.

What does it do?

• Gives you a concise list of all GraphQL requests that have been sent. Easy to track what you're requesting.
• Gives you a raw view of the string of GraphQL being sent.
• Gives you a computed view of the request as your server will interpret it. So it's easy to debug fragments.
• Displays a nicely formatted response.

Screenshots

Looking through GraphQL requests.

Viewing the Raw Query

Viewing the Computed Query

Viewing the Response

I want to give it a try but don't have a GraphQL app

After installing the app, why not head over to GraphQLHub.

Troubleshooting

Not Picking Up Requests

Because of the way Chrome Devtool extensions work, you'll need to have the GraphQL tab open at the time the request is made in order for it to be displayed, it won't pick up requests in the background.

Additionally, the extension will only pick up requests that send the Content-Type header with:

• application/graphql
• application/json where the GraphQL query is in an object parameter called query
• application/x-www-form-urlencoded where the GraphQL query is in a parameter called query

Since GraphQL is fairly new, consensus hasn't exactly been reached on the best way to make queries, if you think another way should be supported, send a PR or open an issue.

Request is being listed as a "GraphQL Error"

It's likely that your GraphQL is invalid. If you've double checked this, open up an issue.

Request is being listed as an "Internal Error"

It's likely that there's a bug in the extension. Open an issue.

Contributing

Hacking on the extension is really easy.

• Clone the repo
• npm install
• Make your changes
• webpack in the top-level directory.
• Load it into chrome://extensions in the normal way.

Roadmap

• Redo approach to CSS. Haven't yet had time to implement something proper.
• Include variable digestion.

---

Author: Ghirro
Source Code: https://github.com/Ghirro/graphql-network
License: 

#graphql 

What is GEEK

Buddha Community

A Chrome Dev-tools Extension for Debugging GraphQL Network Requests

graphql-network

Chrome Devtool that provides a "network"-style tab for GraphQL requests to allow developers to debug more easily.

Get it here

Why?

GraphQL is fantastic but if you're using GraphQL you've probably bumped into how horrible it is to monitor requests via the network tab:

GraphQL network allows you to actually monitor and debug network requests again, just like the good old days.

What does it do?

• Gives you a concise list of all GraphQL requests that have been sent. Easy to track what you're requesting.
• Gives you a raw view of the string of GraphQL being sent.
• Gives you a computed view of the request as your server will interpret it. So it's easy to debug fragments.
• Displays a nicely formatted response.

Screenshots

Looking through GraphQL requests.

Viewing the Raw Query

Viewing the Computed Query

Viewing the Response

I want to give it a try but don't have a GraphQL app

After installing the app, why not head over to GraphQLHub.

Troubleshooting

Not Picking Up Requests

Because of the way Chrome Devtool extensions work, you'll need to have the GraphQL tab open at the time the request is made in order for it to be displayed, it won't pick up requests in the background.

Additionally, the extension will only pick up requests that send the Content-Type header with:

• application/graphql
• application/json where the GraphQL query is in an object parameter called query
• application/x-www-form-urlencoded where the GraphQL query is in a parameter called query

Since GraphQL is fairly new, consensus hasn't exactly been reached on the best way to make queries, if you think another way should be supported, send a PR or open an issue.

Request is being listed as a "GraphQL Error"

It's likely that your GraphQL is invalid. If you've double checked this, open up an issue.

Request is being listed as an "Internal Error"

It's likely that there's a bug in the extension. Open an issue.

Contributing

Hacking on the extension is really easy.

• Clone the repo
• npm install
• Make your changes
• webpack in the top-level directory.
• Load it into chrome://extensions in the normal way.

Roadmap

• Redo approach to CSS. Haven't yet had time to implement something proper.
• Include variable digestion.

---

Author: Ghirro
Source Code: https://github.com/Ghirro/graphql-network
License: 

#graphql 

Chrome Developer Tools in 2020 | UI Debugging | Productivity | Tech Primers

This video covers the different tips and tricks I use while debugging UI code in the Chrome browser using Chrome Developer Tools

⏱ Chapter Timestamps

0:00 - Setting the Context
1:09 - Lighthouse
3:24 - Security
3:58 - Storage - Indexed DB (Database for browser)
4:41 - Session Storage
4:55 - Local Storage
5:03 - Cookies
5:08 - Cache Storage
5:26 - Clear Storage
6:03 - Network
7:03 - Sources (Line breaks)
8:04 - Console
8:46 - Elements

📌 Related Videos

🔗AWS Primer: https://www.youtube.com/playlist?list=PLTyWtrsGknYdyi0JR7c1wsuv-Plrwrzqj
🔗 System Design Primer: https://www.youtube.com/playlist?list=PLTyWtrsGknYeX_wV9ysDuuAxvxfSBfVSI
🔗 Containers Primer: https://www.youtube.com/watch?v=yo2g_CZZWL4&list=PLTyWtrsGknYf_Oee7YOvom5Ev0F3-E2zB
🔗 Kubernetes Primer: https://www.youtube.com/playlist?list=PLTyWtrsGknYfanKF33E12LdJvl5q5PZGp

💥 Join TechPrimers Slack Community: https://bit.ly/JoinTechPrimers
💥 Telegram: https://t.me/TechPrimers
💥 TechPrimer HindSight (Blog): https://medium.com/TechPrimers
💥 Website: http://techprimers.com
💥 Slack Community: https://techprimers.slack.com
💥 Twitter: https://twitter.com/TechPrimers
💥 Facebook: http://fb.me/TechPrimers
💥 GitHub: https://github.com/TechPrimers or https://techprimers.github.io/

🎬Video Editing: FCP

---

🔥 Disclaimer/Policy:
The content/views/opinions posted here are solely mine and the code samples created by me are open sourced.
You are free to use the code samples in Github after forking and you can modify it for your own use.
All the videos posted here are copyrighted. You cannot re-distribute videos on this channel in other channels or platforms.
#ChromeDeveloperTools #Productivity #UIDebugging

#chrome developer #chrome developer tools #chrome

9 Chrome Extensions To Make Your Life Easier

It’s 2021 and I am brought here some fresh new chrome extensions. And no, I will not be covering popular ones like Grammarly, uBlock Origin, Dark Reader, etc.

• Link to Text Fragment
• Insist Instagram Client
• Fready
• WAToolkit
• I don’t care about cookies
• Buster — automatically solve google captchas
• Custom Right-click Menu
• Screenity
• tabExtend

#chrome-extension #google-chrome #chrome #web-development #developer

What Is the Best Java Debugger?

Many people might think this a simple question; I am not one of them. I feel that in the modern world of development, there are too many factors to pick a single tool for debugging any language, let alone Java.

In The Beginning

Let’s take a step back and look at where we started with debugging, and while I am not going to get into the history of debugging, we should look at some of the basic tools used for debugging Java, aside from logging and system-out.

JDP

Let’s start with a quick look at the Java debugger (Java Discovery Protocol - JDP), which is a command-line tool used for debugging Java applications. This tool ships directly from Oracle, so you can be sure it will work; however, it can be complex to use and require knowledge of where you want to debug ahead of time.

A positive aspect of this tool is the fact that you can use it on the same box where the Java Virtual Machine (JVM) is running. This set-up means you do not need to deal with the complexities of connecting any external service that might be restricted by firewalls, which is particularly useful if you are deploying your Java applications into Docker containers. (which let’s be honest, who isn’t).

And while a command-line tool is not the best option for everyday work, what other options are available?

#java #performance #ide #debugging #debug #debuggers #debugging tools #debugging javascript

Autonomous Driving Network (ADN) On Its Way

Talking about inspiration in the networking industry, nothing more than Autonomous Driving Network (ADN). You may hear about this and wondering what this is about, and does it have anything to do with autonomous driving vehicles? Your guess is right; the ADN concept is derived from or inspired by the rapid development of the autonomous driving car in recent years.

Driverless Car of the Future, the advertisement for “America’s Electric Light and Power Companies,” Saturday Evening Post, the 1950s.

The vision of autonomous driving has been around for more than 70 years. But engineers continuously make attempts to achieve the idea without too much success. The concept stayed as a fiction for a long time. In 2004, the US Defense Advanced Research Projects Administration (DARPA) organized the Grand Challenge for autonomous vehicles for teams to compete for the grand prize of $1 million. I remembered watching TV and saw those competing vehicles, behaved like driven by drunk man, had a really tough time to drive by itself. I thought that autonomous driving vision would still have a long way to go. To my surprise, the next year, 2005, Stanford University’s vehicles autonomously drove 131 miles in California’s Mojave desert without a scratch and took the $1 million Grand Challenge prize. How was that possible? Later I learned that the secret ingredient to make this possible was using the latest ML (Machine Learning) enabled AI (Artificial Intelligent ) technology.

Since then, AI technologies advanced rapidly and been implemented in all verticals. Around the 2016 time frame, the concept of Autonomous Driving Network started to emerge by combining AI and network to achieve network operational autonomy. The automation concept is nothing new in the networking industry; network operations are continually being automated here and there. But this time, ADN is beyond automating mundane tasks; it reaches a whole new level. With the help of AI technologies and other critical ingredients advancement like SDN (Software Defined Network), autonomous networking has a great chance from a vision to future reality.

In this article, we will examine some critical components of the ADN, current landscape, and factors that are important for ADN to be a success.

The Vision

At the current stage, there are different terminologies to describe ADN vision by various organizations.

Even though slightly different terminologies, the industry is moving towards some common terms and consensus called autonomous networks, e.g. TMF, ETSI, ITU-T, GSMA. The core vision includes business and network aspects. The autonomous network delivers the “hyper-loop” from business requirements all the way to network and device layers.

On the network layer, it contains the below critical aspects:

• Intent-Driven: Understand the operator’s business intent and automatically translate it into necessary network operations. The operation can be a one-time operation like disconnect a connection service or continuous operations like maintaining a specified SLA (Service Level Agreement) at the all-time.
• **Self-Discover: **Automatically discover hardware/software changes in the network and populate the changes to the necessary subsystems to maintain always-sync state.
• **Self-Config/Self-Organize: **Whenever network changes happen, automatically configure corresponding hardware/software parameters such that the network is at the pre-defined target states.
• **Self-Monitor: **Constantly monitor networks/services operation states and health conditions automatically.
• Auto-Detect: Detect network faults, abnormalities, and intrusions automatically.
• **Self-Diagnose: **Automatically conduct an inference process to figure out the root causes of issues.
• **Self-Healing: **Automatically take necessary actions to address issues and bring the networks/services back to the desired state.
• **Self-Report: **Automatically communicate with its environment and exchange necessary information.
• Automated common operational scenarios: Automatically perform operations like network planning, customer and service onboarding, network change management.

On top of those, these capabilities need to be across multiple services, multiple domains, and the entire lifecycle(TMF, 2019).

No doubt, this is the most ambitious goal that the networking industry has ever aimed at. It has been described as the “end-state” and“ultimate goal” of networking evolution. This is not just a vision on PPT, the networking industry already on the move toward the goal.

David Wang, Huawei’s Executive Director of the Board and President of Products & Solutions, said in his 2018 Ultra-Broadband Forum(UBBF) keynote speech. (David W. 2018):

“In a fully connected and intelligent era, autonomous driving is becoming a reality. Industries like automotive, aerospace, and manufacturing are modernizing and renewing themselves by introducing autonomous technologies. However, the telecom sector is facing a major structural problem: Networks are growing year by year, but OPEX is growing faster than revenue. What’s more, it takes 100 times more effort for telecom operators to maintain their networks than OTT players. Therefore, it’s imperative that telecom operators build autonomous driving networks.”

Juniper CEO Rami Rahim said in his keynote at the company’s virtual AI event: (CRN, 2020)

“The goal now is a self-driving network. The call to action is to embrace the change. We can all benefit from putting more time into higher-layer activities, like keeping distributors out of the business. The future, I truly believe, is about getting the network out of the way. It is time for the infrastructure to take a back seat to the self-driving network.”

Is This Vision Achievable?

If you asked me this question 15 years ago, my answer would be “no chance” as I could not imagine an autonomous driving vehicle was possible then. But now, the vision is not far-fetch anymore not only because of ML/AI technology rapid advancement but other key building blocks are made significant progress, just name a few key building blocks:

• software-defined networking (SDN) control
• industry-standard models and open APIs
• Real-time analytics/telemetry
• big data processing
• cross-domain orchestration
• programmable infrastructure
• cloud-native virtualized network functions (VNF)
• DevOps agile development process
• everything-as-service design paradigm
• intelligent process automation
• edge computing
• cloud infrastructure
• programing paradigm suitable for building an autonomous system . i.e., teleo-reactive programs, which is a set of reactive rules that continuously sense the environment and trigger actions whose continuous execution eventually leads the system to satisfy a goal. (Nils Nilsson, 1996)
• open-source solutions

#network-automation #autonomous-network #ai-in-network #self-driving-network #neural-networks