Developer Tools not dockable to the bottom of the page



  • In every webkit based browser I know it is possible to dock developer tools to the bottom of the page. At the moment I havn't found the possibillity to do this in V. Did I overlook anything?



  • I've seen someone asking the same thing some time ago.
    This is not even a beta, you will be able to dock it into the bottom of the browser soon^^



  • I asked for the same feature months ago!
    ;)

    For a developer this usability fix is a crucial point for adopting Vivaldi…!
    Bye and Thanks for the good work has been done so far.



  • I wouldn't use Vivaldi yet for this stuff, anyway I think they'll care about the dev tools later since not everyone is a developer
    Anyway there's an oblivious workaround:
    1 - un-maximize Vivaldi
    2 - put the window with the tools just below the browser

    The dev tools have a windows native ui, so I guess they still have to integrate them within the browser which is written with modern javascript frameworks/html/css
    They're going to do what you ask for sure!

    pic related:
    [attachment=1915]vivdev-2-2.png[/attachment]
    Attachments:



  • I think that pinning development tools at the bottom of the browser it would be a very good idea. For example, a solution like to Chrome.

    2 idea: Porting the web address to create a new bookmark or web address field or text to search inside and outside the browser

    Sorry for my bad english



  • web developer here, i was looking to move to something different than chrome, docking the dev tools would be awesome…



  • this is literally the most annoying thing about this browser to me as a web developer. i bitched about the same problem to microsoft for edge and they realised it was really important and fixed that so much faster. i was really hoping a browser being made by devs would have had better dev tool handling as a priority.



  • Well, I'm not going to bitch because as a developer I know how hard it is to choose which features to put in a release.. :P
    But yeah, it would be really nice to be able to dock the dev tools…



  • Dock the Developers Tools is an ESSENTIAL feature



  • @GinoPerla:

    I wouldn't use Vivaldi yet for this stuff, anyway I think they'll care about the dev tools later since not everyone is a developer
    Anyway there's an oblivious workaround:
    1 - un-maximize Vivaldi
    2 - put the window with the tools just below the browser

    The dev tools have a windows native ui, so I guess they still have to integrate them within the browser which is written with modern javascript frameworks/html/css
    They're going to do what you ask for sure!

    pic related:
    [attachment=1915]vivdev-2-2.png[/attachment]

    really?



  • One year later.



  • IMO this is a must-have for any web developer. Switching between different windows is annoying and reduces productivity. :(



  • I'm not a developer, so I don't know about this, but I think I've found somethings:
    Open inspect element (tools->developer tools) and at the top right corner, you will find three vertical dots; click on that and click on settings; and a whole lot of options pop up…. ;)
    (you can try shortcuts as well)



  • Unfortunately, the dev tools have been more of an afterthought, and have not gotten much love. I understand there are other priorities, but the dev tools are somewhat useless in their current form.

    Here's three issues that make me choose either Opera 12 (Dragonfly) or Chrome dev tools, instead of Vivaldi.

    [ol]

    • has been mentioned numerous times in this and other threads, it's not dockable.
    • there is no two-way communication, meaning I can select an element in the dev tools window and see it reflected in the browser window, but not vice versa.
    • emulationEnabled is set to false, meaning the mobile testing tools are completely missing. This is a huge deal breaker.

    [/ol]Without these 3 things addressed, the dev tools might as well be removed entirely from Vivaldi, as they add no value to the browser, either for users, or developers.


  • Moderator

    @MrPants:

    Unfortunately, the dev tools have been more of an afterthought, and have not gotten much love. I understand there are other priorities, but the dev tools are somewhat useless in their current form.

    Here's three issues that make me choose either Opera 12 (Dragonfly) or Chrome dev tools, instead of Vivaldi.

    [ol]

    • has been mentioned numerous times in this and other threads, it's not dockable.
    • there is no two-way communication, meaning I can select an element in the dev tools window and see it reflected in the browser window, but not vice versa.
    • emulationEnabled is set to false, meaning the mobile testing tools are completely missing. This is a huge deal breaker.

    [/ol]Without these 3 things addressed, the dev tools might as well be removed entirely from Vivaldi, as they add no value to the browser, either for users, or developers.

    For #2, as in Chrome, you can press the [attachment=3080]elementselectbutton.png[/attachment] button at the top left corner of the DevTools (or hit Ctrl-Shift-C), then, as you hover over various things, the inspector will reflect what you're hovering over. (One bug: In OS X this works more reliably if, after clicking the [attachment=3080]elementselectbutton.png[/attachment] button or hitting Cmd-Shift-C, you click on the original window to give it focus.)
    Attachments:



  • @Isildur:

    For #2, as in Chrome, you can press the [attachment=3080]elementselectbutton.png[/attachment] button at the top left corner of the DevTools (or hit Ctrl-Shift-C), then, as you hover over various things, the inspector will reflect what you're hovering over. (One bug: In OS X this works more reliably if, after clicking the [attachment=3080]elementselectbutton.png[/attachment] button or hitting Cmd-Shift-C, you click on the original window to give it focus.)

    Thanks for that tip. Only problem is you still need to reactivate that button every time you switch back between focus with the dev tools window. With Dragonfly, it's automatically enabled both ways. With Vivaldi, when you do switch focus back to the browser, the dev tools window gets hidden due to it being a separate native window, not integrated with the browser (like a separate windows task). So you have to re-select the dev tools window, then re-enable that button to restore the ability to select elements in the browser window each time you move back and forth between the two windows. Not exactly useable when you have to click that many times.

    I understand that you can tile the two windows so they are both visible as a workaround, but this does not solve the loss of focus, because the dev tools are not integrated with the Vivaldi interface.

    BTW, is there a way to make that button "Sticky", so you don't have to re-select it every time? I believe Chrome exhibits this same behaviour. However, with Dragonfly, it's always set up for two-way communication between the browser and dev tools windows, without having to enable/re-enable it each time.



  • Just to stress out how important this feature is to some people: I just imported all my settings, extensions, bookmarks etc. in preparation of migration from Chrome to Vivaldi, and then I noticed dev tools pop out in another window. I immediately went back to Chrome. I hope this gets sorted out quickly because more people like me, looking for alternative for Chrome, might get discouraged by the lack of this feature.



  • Extra stress and +1 for this feature. I really like the idea of Vivaldi but I actually didn't realise how important this feature was until I didn't have it. The loss of focus is the biggest problem. As for now, this turned into being a deal breaker for me.


  • Moderator

    @MrPants:

    [ol]

    • emulationEnabled is set to false, meaning the mobile testing tools are completely missing. This is a huge deal breaker.
      [/ol]

    That was apparently accidentally disabled (VB-14710), but has returned in this latest snapshot (1.1.443.3).

    For anyone wondering where to find the mobile testing options (since it isn't in the same spot as Chrome now has it*): In Vivaldi DevTools, make sure the bottom pane group is open (to open it, either press Esc to toggle it, or go to the main DevTools menu button ( the vertical ellipsis button in the upper right corner) and click "Show Console"). the lower pane should have its's own menu (vertical ellipsis) button at the top left of the lower pane. From that you can activate an "Emulation" tab. The device profiles shown there can be selected from or added to, by going to the main (top right) DevTools menu button > Settings > Devices.

    *In Chrome's DevTools, there's now a "Device Mode" toggle button ([attachment=3182]devicemode.png[/attachment]) right next to the button at the top left.

    2016.07.05 Edit: Checking back on this in version 1.3.519.25, the Devtools bottom pane Emulation tab now seems to be missing again.
    Attachments:


  • Moderator

    @MrPants:

    Thanks for that tip. Only problem is you still need to reactivate that button every time you switch back between focus with the dev tools window. With Dragonfly, it's automatically enabled both ways. With Vivaldi, when you do switch focus back to the browser, the dev tools window gets hidden due to it being a separate native window, not integrated with the browser (like a separate windows task). So you have to re-select the dev tools window, then re-enable that button to restore the ability to select elements in the browser window each time you move back and forth between the two windows. Not exactly useable when you have to click that many times.

    I understand that you can tile the two windows so they are both visible as a workaround, but this does not solve the loss of focus, because the dev tools are not integrated with the Vivaldi interface.

    Yeah, I agree that that's annoying.

    @MrPants:

    BTW, is there a way to make that button "Sticky", so you don't have to re-select it every time? I believe Chrome exhibits this same behaviour. However, with Dragonfly, it's always set up for two-way communication between the browser and dev tools windows, without having to enable/re-enable it each time.

    I don't know of a way to make it sticky; I agree that that was another of the nice things about Dragonfly. I also really liked Dragonfly's immediate update of elements as you typed html the inspector, and I miss the Network > Make Request (there's the "Postman" Chrome extension, but this really seems like an obvious thing to have in DevTools by default); and various other things.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.