devtools | ⚙️ Browser devtools extension for debugging Vue | Browser Plugin library

 by   vuejs TypeScript Version: v6.5.0 License: MIT

kandi X-RAY | devtools Summary

kandi X-RAY | devtools Summary

devtools is a TypeScript library typically used in Plugin, Browser Plugin, Vue, Visual Studio Code applications. devtools has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

️ Browser devtools extension for debugging Vue.js applications.

            kandi-support Support

              devtools has a medium active ecosystem.
              It has 23713 star(s) with 4117 fork(s). There are 520 watchers for this library.
              It had no major release in the last 12 months.
              There are 435 open issues and 1105 have been closed. On average issues are closed in 116 days. There are 40 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of devtools is v6.5.0

            kandi-Quality Quality

              devtools has 0 bugs and 0 code smells.

            kandi-Security Security

              devtools has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              devtools code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              devtools is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              devtools releases are available to install and integrate.
              It has 409 lines of code, 0 functions and 289 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of devtools
            Get all kandi verified functions for this library.

            devtools Key Features

            No Key Features are available at this moment for devtools.

            devtools Examples and Code Snippets

            No Code Snippets are available at this moment for devtools.

            Community Discussions


            The unauthenticated git protocol on port 9418 is no longer supported
            Asked 2022-Mar-27 at 13:23

            I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs



            Answered 2022-Mar-16 at 07:01

            First, this error message is indeed expected on Jan. 11th, 2022.
            See "Improving Git protocol security on GitHub".

            January 11, 2022 Final brownout.

            This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
            This will help clients discover any lingering use of older keys or old URLs.

            Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

            As noted by Jörg W Mittag:

            There was a 4-month warning.
            The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

            Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

            Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

            The permanent shutdown is not until March 15th.

            For GitHub Actions:

            As in actions/checkout issue 14, you can add as a first step:



            React Native Android crashes on enabling debug mode
            Asked 2022-Mar-10 at 20:03

            Shaking the android device and hit Debug, and it crashes every time right away. From the Android Studio logcat, it shows No source URL loaded, have you initialised the instance?:



            Answered 2021-Dec-21 at 02:56

            After some more search arounds, found this is a known issue in react-native-reanimated. As their website points out

            Please note that Reanimated 2 doesn't support remote debugging, only Flipper can be used for debugging.

            Another github issue also pointed out this issue

            This is expected, you can't use remote debugging with turbomodules (which Reanimated v2 is using). Check out Flipper to debug your app.



            Removing this library fixed the issue.

            1. Remove the react-native-reanimated dependency in package.json
            2. Remove related code in android's
            3. yarn install or npm install
            4. Go to the ios folder and run pod install
            5. Go the the android folder and run ./gradlew clean
            6. Rebuild the app. yarn android and yarn ios

            Another alternative is to use Flipper for debugging instead.



            Duplicate active queries in Apollo Client Devtools
            Asked 2022-Feb-28 at 17:33

            I’m using React with Apollo Client 3 and Hasura as a GraphQL server.

            The component ProductList use the get_products query once. Then two exact copies of this query are memorized in the Apollo Cache as shown in the Apollo DevTools.

            My question is - Why two identical queries get generated in the cache instead of one?

            Apollo DevTools results

            My code



            Answered 2022-Feb-28 at 17:33

            This is basically a duplicate of Apollo Client what are active queries?

            The main concept is that Active Queries represents the queries that are running inside of mounted components in your React application. It doesn't mean that the data is cached twice, it means that there are two places in your application that rely on the results of this query.

            If the results of the query in cache are updated both places will automatically get the data updates.



            Springfox 3.0.0 is not working with Spring Boot 2.6.0
            Asked 2022-Feb-22 at 14:10

            Springfox 3.0.0 is not working with Spring Boot 2.6.0, after upgrading I am getting the following error



            Answered 2021-Dec-01 at 02:17

            I know this does not solve your problem directly, but consider moving to springdoc which most recent release supports Spring Boot 2.6.0. Springfox is so buggy at this point that is a pain to use. I've moved to springdoc 2 years ago because of its Spring WebFlux support and I am very happy about it. Additionally, it also supports Kotlin Coroutines, which I am not sure Springfox does.

            If you decide to migrate, springdoc even has a migration guide.



            Tensorflow setup on RStudio/ R | CentOS
            Asked 2022-Feb-11 at 09:36

            For the last 5 days, I am trying to make Keras/Tensorflow packages work in R. I am using RStudio for installation and have used conda, miniconda, virtualenv but it crashes each time in the end. Installing a library should not be a nightmare especially when we are talking about R (one of the best statistical languages) and TensorFlow (one of the best deep learning libraries). Can someone share a reliable way to install Keras/Tensorflow on CentOS 7?

            Following are the steps I am using to install tensorflow in RStudio.

            Since RStudio simply crashes each time I run tensorflow::tf_config() I have no way to check what is going wrong.



            Answered 2022-Jan-16 at 00:08

            Perhaps my failed attempts will help someone else solve this problem; my approach:

            • boot up a clean CentOS 7 vm
            • install R and some dependencies



            Invalid argument(s: A directory corresponding to fileSystemPath /Users/user/.pub-cache/hosted/ could not be found
            Asked 2021-Dec-27 at 21:46

            Somehow the "build" directory doesn't exist within devtools-2.9.2 directory. I am getting this exception only while running the build on iPhone SE 2nd generation iOS 14.5 simulator though, which is weird. This began after an unexpected forced reboot of my mac. But I can not directly connect this event.

            What is happening and how can I build this stuff or get rid of exceptions? And what is the cause?

            flutter doctor -v No issues found



            Answered 2021-Dec-20 at 23:42

            DevTools is no longer being shipped via pub and is now part of the Dart SDK. 2.9.2 was published unintentionally this morning and has since been retracted.

            How were you starting DevTools? You might want to file an issue on the DevTools repository if you're still having issues and I (@bkonyi) can help you out further there.



            React-Typescript: Module '"react-router-dom"' has no exported member 'RouteComponentProps'
            Asked 2021-Dec-16 at 17:05

            I have a project and with this project I have a login page and I want to use "RouteComponentProps", but I got this error:



            Answered 2021-Dec-16 at 17:05

            react-router v6 doesn't use RouteComponentProps anymore. Here are some links with examples on how to change route and how to use params on v6 with some links where you can find more informations:

            For changing route (old history.push)

            If you want to change the route after the login is successful react-router docs specify

            In v6, this app should be rewritten to use the navigate API. Most of the time this means changing useHistory to useNavigate and changing the history.push or history.replace callsite.

            So basically instead of having somthing like



            Provide annotation processor argument when using Kotlin Signal Processing (KSP)
            Asked 2021-Dec-03 at 10:01

            I used the following to use KSP in combination with Room:



            Answered 2021-Dec-03 at 10:01

            Add the following to your build.gradle:



            Is it acceptable for a reducer to mutate its action object in order to communicate partial handling of the action?
            Asked 2021-Nov-19 at 16:23

            I’m writing a pretty complex app in React/Redux/Redux Toolkit, and I came across a situation which I’m not really sure how to handle. I found a way to do it, but I’m wondering if it can cause issues or if there is a better way. The short version is that I want the reducer to communicate to the caller without modifying the state, and the only way I’ve found is to mutate the action.


            To simplify, let’s say that I want to implement a horizontal scrollbar (but in reality it’s significantly more complicated). The state contains the current position, a number capped between some min and max values, and the UI draws a rectangle that has that position and that can be clicked and dragged horizontally.

            Main property: If the user clicks and drags further than the min/max value, then the rectangle does not move further, but if the user then moves in the other direction, the rectangle should wait until the mouse is back at its original position before starting to move back (exactly like scrollbars behave on most/all operating system).

            Keep in mind that my real use case is significantly more complex, I have a dozen of similar situations, sometimes capping between min and max, sometimes snapping every 100 pixels, sometimes more complicated constraints that depend on various parts of the state, etc. I’d like a solution that works in all such cases and that preserves the separation between the UI and the logic.


            • I do not want the UI/component/custom hook to have the responsibility to compute when we reach the min/max, because in my use case it can be pretty complex and depend on various parts of the state. So the reducer is the only place that knows whether we did reach the min/max.
            • On the other hand, in order to implement the Main property above, I do need to somehow remember where we clicked on the rectangle, or how many pixels of a given "drag" action was handled, in order to know when to start moving back. But I don’t want to store that in the state as it’s really a UI detail that doesn’t belong there (and also because I have quite a few different situations where I need to do that and my state would become significantly more complex, and unnecessary state changes will be performance heavy).


            So the reducer is the only part that knows if we reached the min/max, and the only way a reducer usually communicates to the rest of the app is through the state, but I don’t want to communicate that information through the state.


            I actually managed to find a way to solve it, which seems to work just fine but feels somewhat wrong: mutating the action object in the reducer.

            The reducer takes the action "dragged by 10 pixels", realizes that it can only drag by 3 pixels, creates a new state where it has been dragged by 3 pixels, and adds an action.response = 3 field to the action.

            Then after my custom hook dispatched the "dragged by 10 pixels" action, it looks at the action.response field of the return value of dispatch to know how much was actually handled, and it remembers the difference with the expected value (in this case it remembers that we are 7 pixels away from the original position). In this way, if at the next mousemove we drag by -9 pixels, my custom hook can add that number to the 7 pixels it remembers, and tell the reducer that we only moved by -2 pixels.

            It seems to me that this solution preserves separation of UI/logic perfectly:

            • The reducer only needs to know by how many pixels we moved and then return the new state and how many pixels were actually handled (through mutating the action)
            • The custom hook can remember how far off we are from the original position (without having to know why), and then it will simply correct event.movementX to compensate with how much the reducer didn’t handle in previous actions, and then send the correct delta to the reducer.

            It also works just fine with things like snapping at every 100 pixels or such.

            The only weird thing is that the reducer mutates the action, which I would assume is not supposed to happen as it should be a pure function, but I couldn’t find any issue with it so far. The app just works, Redux Toolkit doesn’t complain, and the devtools work just fine as well.

            Is there any issue with this solution?

            Is there another way it could be done?



            Answered 2021-Nov-19 at 16:23

            At a technical level, I can see how this could work. But I'd also agree it feels "icky". Very technically speaking, mutating the action itself qualifies as a "side effect", although it's not one that would meaningfully break the rest of the app.

            It sounds as if the key bit of logic here is more at the "dispatch an action" level. I think you could likely call getState() before and after the dispatch to compare the results, and derive the additional needed data that way. In fact, this might be a good use case for a thunk:



            Disabling the "Length Authoring Tools" (css unit selector) in Chrome Devtools Inspector
            Asked 2021-Nov-18 at 14:28

            The undesired functionality
            In Chrome 95 there was introduced new functionality where the user can hover and click on the unit part of a css value to hotswap the unit.
            The feature is part of a package solution that has been labeled "Length Authoring Tools" in the release notes, and can be seen in action and described in detail in the release notes on the official blog.

            How can this feature be disabled?

            Issue 1:

            If a css-line in the inspector says padding: 0 10px; then the user can click the px-part of the line and open a selector that let's the user swap px to other units such as rem,vmax or in.
            Clicking this part of the value no longer lets the user edit the entire value quickly. Most users already know what unit they desire to use beforehand, so they do not need to be helped to accidentally select pt or vw when working exclusively with px everywhere else.

            Issue 2:

            When selecting and copying properties from the inspector there is now inserted whitespaces/new lines between the value and the unit since the unit portion seems to be considered a separate element. This makes prototyping in the devtools and copy/pasting to external documents very tedious and broken.



            Answered 2021-Nov-18 at 14:28

            Updated answer 2021-11-16:

            An option has been added to disable Length Authoring Tools in Chrome 96.

            The following is mentioned in the official release notes for Chrome 96.

            To disable Length Authoring Tools, navigate to this location in the DevTools and uncheck the checkbox:
            Settings > Experiments > Enable CSS length authoring tools in the Styles pane.

            But... The main issues regarding Length Authoring Tools have also been fully remedied in Chrome 96.

            The initial incentive to disable these tools has been greatly diminished because of this.

            A chevron will now appear to the right of the hovered value instead of reacting to clicks to the entire unit portion of it.

            Copy paste now also works as intended.

            It is now possible to disable the Length Authoring Tools, but you might no longer need to.

            Old answer:

            You can't. (Though fixes are coming!)
            It is not possible to toggle this feature in the current live stable release ( Chrome 95.0.4638.69 ).

            Fixes have been added to Chromium ( [1], [2], [3] ) that are slowly making their way to the stable release of Chrome.

            But help is on its way...

            Chrome 96 is scheduled to be released on November 16 2021 (source), or ~3 weeks after October 28 according to this official tweet. It will at least contain a revert to free text editing of css properties (source). Hopefully version 96 will address the issue completely, but if it doesn't then the next major release is scheduled for January 4 2021 (If this issue is unresolved by then somebody at Google should be fired).

            As for now, Chrome Canary seems to have these fixes implemented and might be considered an alternative solution to the issue if you find the current state of Length Authoring Tools unbearable.

            Please be advised that Chrome Canary can be quite unstable.

            This question and answer will be edited and corrected once there are real fixes in the live stable version.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install devtools

            You can download it from GitHub.


            For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone vuejs/devtools

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link