3 ms·

my peeves (in order of annoyance, desc): - inspecting ajax responses in console without flipping to net panel, then hunting for the correct request. - keeping

my peeves (in order of annoyance, desc): - inspecting ajax responses in console without flipping to net panel, then hunting for the correct request. - keeping an inspected/selected html element highlighted on page, not just on mouseover so you can see element bounds. this is useful for tweaking sizing, padding, margins and position. - as-i-type updating of html rather than on blur - live highlighting html as it changes - multiline console - can't arrange the console tab to be first or arrange the tabs in my most frequently used order. to be fair, FB doesnt offer this either, but I like the console to be first since i spend 90% of my time there in FB, probably cause it's much more useful than chrome's. there's more that dont immediately come to mind, but not having the first 2 is a major nuisance and productivity killer.

smalu 13y ago
You can enable logging XMLHttpRequests in dev tools settings (gears icon on bottom-right edge) -> console
- leeoniya 13y ago
  it's not at all useful. all you get is some stack-tace-like thing without any of what you actually want to see. like req/resp headers and body, params, inline json/html decoding based on response type. chrome lags here by a large margin.
  - clarkm 13y ago
    Just click the request from the console, and it takes you to the network tab where you can see the headers, response, etc.
    - leeoniya 13y ago
      to see the response body of a request in chrome: 1. Click request in console 2. Find and click request again in Net panel 3. Click Preview or Response tab 4. Click console again to return and then... 5. Oh wait, want to see something in the headers 6. Rinse and repeat. In FB: 1. Click request in console. 2. See raw response body right away, or click headers to see headers or json/html to see those rendered nicely. 3. bonus: view multiple json requests in same window
      - magicalist 13y ago
        It's actually more like 1. Click request in console 2. Click on the request that was just highlighted for you in the Net panel 3. See headers right away, or click Response to see raw response or Preview to see those rendered nicely 4. Click console again to return and then... 5. Oh wait, want to see something in the headers 6. Go to the Net panel, still there for you It's a different workflow and it's probably annoying to you since you're not used to it, but "it's not at all useful" is edging past hyperbolic. Personally I feel like a clumsy idiot when I go back to Firebug, even though I used to live in it and once knew every quirk. I think that's just the way of developer tools.
thedufer 13y ago
> multiline console Shift-enter in the Chrome console creates a newline rather than executing. > live highlighting html as it changes In the Rendering tab (bottom panel) there's a toggle for "Show paint rectangles" which sounds like its close (but not quite the same) as what you're looking for.
- leeoniya 13y ago
  > Shift-enter in the Chrome console creates a newline rather than executing. this is not only a major pain in the ass, but also much much worse than just having a persistent multiline editor window that keeps your code, cursor position and selection intact between executions. there is simply no comparison here.
  - oomkiller 13y ago
    Use snippets and just hit the run button for a near-identical experience. There is a keyboard shortcut for it too IIRC
jkrems 13y ago
I rarely need the console tab in the chrome devtools because hitting Esc is normally way faster. Also having the tabs in a defined order allows you to use Cmd+n to switch between them (and the number stays the same).

smalu 13y ago

You can enable logging XMLHttpRequests in dev tools settings (gears icon on bottom-right edge) -> console

leeoniya 13y ago
it's not at all useful. all you get is some stack-tace-like thing without any of what you actually want to see. like req/resp headers and body, params, inline json/html decoding based on response type. chrome lags here by a large margin.
- clarkm 13y ago
  Just click the request from the console, and it takes you to the network tab where you can see the headers, response, etc.
  - leeoniya 13y ago
    to see the response body of a request in chrome: 1. Click request in console 2. Find and click request again in Net panel 3. Click Preview or Response tab 4. Click console again to return and then... 5. Oh wait, want to see something in the headers 6. Rinse and repeat. In FB: 1. Click request in console. 2. See raw response body right away, or click headers to see headers or json/html to see those rendered nicely. 3. bonus: view multiple json requests in same window
    - magicalist 13y ago
      It's actually more like 1. Click request in console 2. Click on the request that was just highlighted for you in the Net panel 3. See headers right away, or click Response to see raw response or Preview to see those rendered nicely 4. Click console again to return and then... 5. Oh wait, want to see something in the headers 6. Go to the Net panel, still there for you It's a different workflow and it's probably annoying to you since you're not used to it, but "it's not at all useful" is edging past hyperbolic. Personally I feel like a clumsy idiot when I go back to Firebug, even though I used to live in it and once knew every quirk. I think that's just the way of developer tools.

thedufer 13y ago

> multiline console Shift-enter in the Chrome console creates a newline rather than executing. > live highlighting html as it changes In the Rendering tab (bottom panel) there's a toggle for "Show paint rectangles" which sounds like its close (but not quite the same) as what you're looking for.

leeoniya 13y ago
> Shift-enter in the Chrome console creates a newline rather than executing. this is not only a major pain in the ass, but also much much worse than just having a persistent multiline editor window that keeps your code, cursor position and selection intact between executions. there is simply no comparison here.
- oomkiller 13y ago
  Use snippets and just hit the run button for a near-identical experience. There is a keyboard shortcut for it too IIRC

jkrems 13y ago

I rarely need the console tab in the chrome devtools because hitting Esc is normally way faster. Also having the tabs in a defined order allows you to use Cmd+n to switch between them (and the number stays the same).